Utilice funciones de estilo para componentes de material-ui además de Box

Aug 20 2020

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 ThemeProviderde styled-components, pero estoy asumiendo que MUI de ThemeProviderobras 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 myaccesorio:

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 composeque usar mis componentes cada vez que quiera usar las funciones de estilo.

Respuestas

1 RyanCogswell Aug 21 2020 at 15:33

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 TextFieldcuando 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 Boxcon 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 componentaccesorio 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?