Используйте функции стиля для компонентов пользовательского интерфейса материала помимо Box
Я только начинаю с Material UI. Спасибо за терпение.
Я знаю, что вы можете использовать готовые вещи <Box mx={2}>
(ха). Так что, если я хотел сделать поле вокруг, скажем, a TextField
, я мог бы обернуть его в коробку.
Есть ли простой способ настроить тему моего приложения, чтобы любой компонент мог использовать эти свойства функций стиля? ( m
, p
, display
И т.д.)
Чтобы я мог <TextField mx={2}/>
без необходимости оборачивать его в Box
.
В документах подразумевают , что вы можете сделать это: (в данном примере используется ThemeProvider
из , styled-components
но я предполагая , что Муи 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
опоры:
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
свои компоненты каждый раз, когда я хочу использовать функции стиля.
Ответы
В документах показывают , как тема может параметризировать Box особенности (например , таким образом, что блок является интервал 4px вместо 8px) - тема делает ничего , чтобы включить эти функции не делает.
Material-UI намеревается поддерживать функции @ material-ui / system в основных компонентах в 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
с клоном пропеллером и оберните компонент , который вы хотите стиль. Например:
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 vs style для вертикального интервала в пользовательском интерфейсе материала
- Компонент многократного использования с использованием функций Box на основе темы
- Использование компонента Material-UI Box с компоновкой ящика
- Как использовать кнопку переопределения с помощью компонента Box в Material-UI?