Use funções de estilo para componentes material-ui além do Box

Question

Estou apenas começando com o Material UI. Obrigado por ter paciência comigo.

Eu sei que você pode usar coisas como <Box mx={2}>out-of-the-box (ha). Portanto, se eu quisesse colocar uma margem em torno de, digamos, um TextField, poderia embrulhá-lo em uma caixa.

Existe uma maneira simples de configurar o tema do meu aplicativo para que qualquer componente possa usar esses adereços de função de estilo? ( m, p, display, Etc)

Para que eu pudesse <TextField mx={2}/>sem ter que embrulhar em um Box.

Os documentos indicam que você pode fazer isso: (o exemplo usa ThemeProviderfrom, styled-componentsmas estou assumindo que o MUI ThemeProviderfunciona da mesma maneira ???)

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>
  )
}

Eu tentei isso, mas ele travou no TextField's mysuporte:

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>;

Posso fazer algo assim e funciona:

function App() {
  const Input = styled(TextField)(compose(spacing))

  return <Input my={3}/>
}

Mas eu teria composeque usar meus componentes toda vez que quiser usar as funções de estilo.

Answer 1

Os documentos estão mostrando como o tema pode parametrizar os recursos do Box (por exemplo, de modo que uma unidade de espaçamento seja 4px em vez de 8px) - o tema não faz nada para habilitar esses recursos.

O Material-UI pretende oferecer suporte aos recursos do @material-ui / system nos componentes principais da v5 , mas ainda faltam meses para isso.

Suas opções principais são fazer algo como você mostrou em seu exemplo (embora você deva passar const Input = styled(TextField)(compose(spacing))para o nível superior em vez de fazer isso dentro da renderização do App). Você pode colocar isso em um arquivo separado e importar esse componente, em vez de TextFieldsempre que quiser usar esses recursos. Por exemplo:

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>
  );
}

Outra opção é usar Boxcom o clone prop e envolver o componente que você deseja estilizar. Por exemplo:

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>
  );
}

Você também pode usar a componentproposta 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>
  );
}

Respostas relacionadas:

• Material-UI Grid não esconde quando usa Display
• Tamanho de ícone dinâmico em Material-UI
• Box vs className vs style para espaçamento vertical em Material UI
• Componente reutilizável usando recursos do Box baseados em tema
• Usando Material-UI Box Component com o Drawer Compoment
• Como usar o botão de substituição usando o componente Box no Material-UI?