Utilice funciones de estilo para componentes de material-ui además de Box
Recién estoy comenzando con Material UI. Gracias por soportarme.
Sé que puedes usar cosas como las listas para usar <Box mx={2}>
(ja). Entonces, si quisiera poner un margen alrededor, digamos, a TextField
, podría envolverlo en una caja.
¿Existe una forma sencilla de configurar el tema de mi aplicación para que cualquier componente pueda usar esos accesorios de función de estilo? ( m
, p
, display
, Etc.)
Para que pudiera hacerlo <TextField mx={2}/>
sin tener que envolverlo en un Box
.
Los documentos dan a entender que se puede hacer esto: (los usos de ejemplo ThemeProvider
de styled-components
, pero estoy asumiendo que MUI de ThemeProvider
obras de la misma manera ???)
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>
)
}
Intenté esto pero falla desde el TextField's
my
accesorio:
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>;
Puedo hacer algo como esto y funciona:
function App() {
const Input = styled(TextField)(compose(spacing))
return <Input my={3}/>
}
Pero luego tendría compose
que usar mis componentes cada vez que quiera usar las funciones de estilo.
Respuestas
Los documentos muestran cómo el tema puede parametrizar las características de Box (por ejemplo, que una unidad de espaciado sea de 4px en lugar de 8px); el tema no hace nada para habilitar esas características.
Material-UI tiene la intención de admitir las funciones de @ material-ui / system en los componentes principales de la versión 5 , pero aún faltan meses para eso.
Sus opciones principales están haciendo algo como lo mostró en su ejemplo (aunque debería pasar const Input = styled(TextField)(compose(spacing))
al nivel superior en lugar de hacerlo dentro del renderizado de la aplicación). Puede poner esto en un archivo separado e importar este componente en lugar de TextField
cuando quiera usar esas funciones. Por ejemplo:
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>
);
}
Otra opción es usar Box
con el accesorio de clonación y envolver el componente que desea diseñar. Por ejemplo:
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>
);
}
También puede utilizar el component
accesorio de 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>
);
}
Respuestas relacionadas:
- Material-UI Grid no oculta cuando se usa la pantalla
- Tamaño de icono dinámico en Material-UI
- Box vs className vs estilo para el espaciado vertical en Material UI
- Componente reutilizable que utiliza funciones de Box basadas en temas
- Uso del componente Material-UI Box con el componente Drawer
- ¿Cómo usar el botón de anulación usando el componente Box en Material-UI?