Usa le funzioni di stile per i componenti material-ui oltre a Box

Question

Sto appena iniziando con Material UI. Grazie per la pazienza.

So che puoi usare cose come <Box mx={2}>out-of-the-box (ha). Quindi, se volessi mettere un margine intorno, diciamo, a TextField, potrei avvolgerlo in una scatola.

C'è un modo semplice per impostare il tema della mia app in modo che qualsiasi componente possa utilizzare quegli oggetti di scena della funzione di stile? ( m, p, display, Ecc)

In modo che potessi farlo <TextField mx={2}/>senza doverlo avvolgere in un file Box.

I documenti implicano che puoi farlo: (l'esempio usa ThemeProviderda styled-componentsma presumo che MUI funzioni ThemeProviderallo stesso modo ???)

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

Ho provato questo ma si blocca TextField's mydall'elica:

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 fare qualcosa del genere e funziona:

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

  return <Input my={3}/>
}

Ma poi dovrei composeusare i miei componenti ogni volta che voglio usare le funzioni di stile.

Answer 1

I documenti mostrano come il tema può parametrizzare le funzionalità di Box (ad esempio, in modo tale che un'unità di spaziatura sia 4px invece di 8px) - il tema non fa nulla per abilitare queste funzionalità.

Material-UI intende supportare le funzionalità @ material-ui / system sui componenti principali nella v5 , ma mancano ancora mesi.

Le tue opzioni principali stanno facendo qualcosa come hai mostrato nel tuo esempio (anche se dovresti passare const Input = styled(TextField)(compose(spacing))al livello superiore piuttosto che farlo all'interno del rendering dell'app). Puoi metterlo in un file separato e importare questo componente invece di TextFieldogni volta che desideri utilizzare quelle funzionalità. Per esempio:

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

Un'altra opzione è usare Boxcon il clone prop e avvolgere il componente che vuoi modellare. Per esempio:

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

Puoi anche usare il componentprop di 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>
  );
}

Risposte correlate:

• Material-UI Grid non nasconde quando si usa Display
• Dimensione dinamica delle icone nell'interfaccia utente dei materiali
• Riquadro vs className vs stile per la spaziatura verticale nell'interfaccia utente dei materiali
• Componente riutilizzabile utilizzando le funzionalità di Box basate su temi
• Utilizzo del componente scatola dell'interfaccia utente materiale con il componente cassetto
• Come utilizzare il pulsante di sostituzione utilizzando il componente Box in Material-UI?