ใช้ฟังก์ชันรูปแบบสำหรับส่วนประกอบ material-ui นอกเหนือจาก Box
ฉันเพิ่งเริ่มต้นด้วย 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
my
prop:
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
ส่วนประกอบของฉันทุกครั้งที่ฉันต้องการใช้ฟังก์ชันสไตล์
คำตอบ
เอกสารจะแสดงให้เห็นว่ารูปแบบที่สามารถ 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 ได้อย่างไร