ใช้ฟังก์ชันรูปแบบสำหรับส่วนประกอบ material-ui นอกเหนือจาก Box

Aug 20 2020

ฉันเพิ่งเริ่มต้นด้วย UI วัสดุ ขอบคุณที่อดทนกับฉัน

ฉันรู้ว่าคุณสามารถใช้สิ่งต่างๆเช่น<Box mx={2}>นอกกรอบ (ฮา) ดังนั้นถ้าฉันต้องการวางขอบรอบ ๆ บอกว่า a TextFieldฉันห่อมันลงในกล่องได้

มีวิธีง่ายๆในการตั้งค่าธีมของแอปเพื่อให้ส่วนประกอบใด ๆสามารถใช้อุปกรณ์ประกอบฉากสไตล์เหล่านั้นได้หรือไม่? ( m, p, displayฯลฯ )

เพื่อที่ฉันจะทำได้<TextField mx={2}/>โดยไม่ต้องห่อเป็นBoxไฟล์.

เอกสารบ่งบอกว่าคุณสามารถทำเช่นนี้: (ใช้ตัวอย่างThemeProviderจากstyled-componentsแต่ฉันสมมติว่า MUI ของThemeProviderการทำงานในลักษณะเดียวกัน ???)

import React from 'react'
import { ThemeProvider } from 'styled-components'

const theme = {
  spacing: 4,
  palette: {
    primary: '#007bff',
  },
};

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* children */}
    </ThemeProvider>
  )
}

ฉันได้ลองแล้ว แต่มันขัดข้องจากTextField's myprop:

import { createMuiTheme, TextField, ThemeProvider } from '@material-ui/core';

// Greatly simplified version of my component
const App = () => <TextField my={2}/> 

let theme = createMuiTheme({})

export default () =>
  <ThemeProvider theme={ theme }>
    <App/>
  </ThemeProvider>;

ฉันสามารถทำสิ่งนี้ได้และได้ผล:

function App() {
  const Input = styled(TextField)(compose(spacing))

  return <Input my={3}/>
}

แต่ฉันต้องใช้composeส่วนประกอบของฉันทุกครั้งที่ฉันต้องการใช้ฟังก์ชันสไตล์

คำตอบ

1 RyanCogswell Aug 21 2020 at 15:33

เอกสารจะแสดงให้เห็นว่ารูปแบบที่สามารถ parameterize กล่องให้บริการ (เช่นดังกล่าวว่าหน่วยระยะห่างเป็น 4px แทน 8px) - รูปแบบที่ไม่ได้ทำอะไรเพื่อเปิดใช้งานคุณลักษณะเหล่านั้น

Material-UI ตั้งใจที่จะสนับสนุน @ material-ui / คุณลักษณะของระบบบนส่วนประกอบหลักใน v5แต่ก็ยังใช้เวลาอีกหลายเดือน

ตัวเลือกหลักของคุณกำลังทำบางสิ่งอย่างที่คุณแสดงในตัวอย่างของคุณ (แม้ว่าคุณควรย้ายconst Input = styled(TextField)(compose(spacing))ไปที่ระดับบนสุดแทนที่จะทำสิ่งนี้ภายในการเรนเดอร์แอพ) คุณสามารถใส่ไว้ในไฟล์แยกต่างหากและนำเข้าส่วนประกอบนี้แทนTextFieldเมื่อใดก็ตามที่คุณต้องการใช้คุณสมบัติเหล่านั้น ตัวอย่างเช่น:

MyTextField.js

import TextField from "@material-ui/core/TextField";
import { styled } from "@material-ui/core/styles";
import { compose, spacing } from "@material-ui/system";

export default styled(TextField)(compose(spacing));

App.js

import React from "react";
import TextField from "./MyTextField";

export default function App() {
  return (
    <div className="App">
      <TextField variant="outlined" label="Material-UI system demo" />
    </div>
  );
}

อีกทางเลือกหนึ่งคือใช้Boxกับclone propและห่อส่วนประกอบที่คุณต้องการจัดสไตล์ ตัวอย่างเช่น:

import React from "react";
import TextField from "@material-ui/core/TextField";
import Box from "@material-ui/core/Box";

export default function App() {
  return (
    <div className="App">
      <Box my={3} clone>
        <TextField variant="outlined" label="Box demo" />
      </Box>
    </div>
  );
}

คุณยังสามารถใช้componentเสาของBox:

import React from "react";
import TextField from "@material-ui/core/TextField";
import Box from "@material-ui/core/Box";

export default function App() {
  return (
    <div className="App">
      <Box my={3} component={TextField} variant="outlined" label="Box demo" />
    </div>
  );
}

คำตอบที่เกี่ยวข้อง:

  • Material-UI Grid ไม่ได้ซ่อนเมื่อใช้ Display
  • ขนาดไอคอนแบบไดนามิกใน Material-UI
  • Box vs className เทียบกับสไตล์สำหรับระยะห่างแนวตั้งใน Material UI
  • ส่วนประกอบที่นำกลับมาใช้ใหม่ได้โดยใช้คุณลักษณะของกล่องตามธีม
  • การใช้ส่วนประกอบกล่อง Material-UI กับ Drawer Compoment
  • จะใช้ปุ่มแทนที่โดยใช้ส่วนประกอบกล่องใน Material-UI ได้อย่างไร