Gunakan fungsi gaya untuk komponen material-ui selain Box
Saya baru mulai dengan Material UI. Terima kasih telah bersama dengan saya.
Saya tahu Anda dapat menggunakan hal-hal seperti <Box mx={2}>
out-of-the-box (ha). Jadi jika saya ingin memberi margin, katakanlah, a TextField
, saya bisa membungkusnya dalam sebuah kotak.
Apakah ada cara sederhana untuk mengatur tema aplikasi saya sehingga komponen apa pun dapat menggunakan alat peraga fungsi gaya? ( m
, p
, display
, Dll)
Sehingga saya bisa melakukannya <TextField mx={2}/>
tanpa harus membungkusnya dalam Box
.
The docs menyiratkan bahwa Anda dapat melakukan ini: (contoh penggunaan ThemeProvider
dari styled-components
tapi aku mengasumsikan bahwa MUI ThemeProvider
bekerja dengan cara yang sama ???)
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>
)
}
Saya sudah mencoba ini tetapi macet dari 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>;
Saya bisa melakukan sesuatu seperti ini dan berhasil:
function App() {
const Input = styled(TextField)(compose(spacing))
return <Input my={3}/>
}
Tetapi kemudian saya harus menggunakan compose
komponen saya setiap kali saya ingin menggunakan fungsi gaya.
Jawaban
The docs menunjukkan bagaimana tema dapat parameterize Box fitur (misalnya seperti yang unit jarak adalah 4px bukan 8px) - tema tidak melakukan apa pun untuk mengaktifkan fitur tersebut.
Material-UI bermaksud untuk mendukung fitur @ material-ui / sistem pada komponen inti di v5 , tetapi itu masih beberapa bulan lagi.
Opsi utama Anda adalah melakukan sesuatu seperti yang Anda tunjukkan dalam contoh Anda (meskipun Anda harus pindah const Input = styled(TextField)(compose(spacing))
ke level teratas daripada melakukan ini dalam render Aplikasi). Anda dapat meletakkan ini di file terpisah dan mengimpor komponen ini daripada TextField
kapan pun Anda ingin menggunakan fitur tersebut. Misalnya:
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>
);
}
Pilihan lain adalah dengan menggunakan Box
dengan clone prop dan membungkus komponen Anda ingin bergaya. Misalnya:
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>
);
}
Anda juga dapat menggunakan component
prop dari 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>
);
}
Jawaban terkait:
- Material-UI Grid tidak menyembunyikan saat menggunakan Display
- Ukuran ikon dinamis di Material-UI
- Kotak vs className vs gaya untuk penspasian vertikal di Material UI
- Komponen yang dapat digunakan kembali menggunakan fitur Box berbasis tema
- Menggunakan Komponen Kotak Material-UI dengan Komposisi Laci
- Bagaimana cara menggunakan tombol override menggunakan komponen Box di Material-UI?