Gunakan fungsi gaya untuk komponen material-ui selain Box

Aug 20 2020

Saya baru mulai dengan Material UI. Terima kasih telah bersama dengan saya.

Saya tahu Anda dapat menggunakan hal-hal seperti <Box mx={2}>out-of-the-box (ha). Jadi jika saya ingin memberi margin, katakanlah, a TextField, saya bisa membungkusnya dalam sebuah kotak.

Apakah ada cara sederhana untuk mengatur tema aplikasi saya sehingga komponen apa pun dapat menggunakan alat peraga fungsi gaya? ( m, p, display, Dll)

Sehingga saya bisa melakukannya <TextField mx={2}/>tanpa harus membungkusnya dalam Box.

The docs menyiratkan bahwa Anda dapat melakukan ini: (contoh penggunaan ThemeProviderdari styled-componentstapi aku mengasumsikan bahwa MUI ThemeProviderbekerja dengan cara yang sama ???)

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

Saya sudah mencoba ini tetapi macet dari TextField's myprop:

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

Saya bisa melakukan sesuatu seperti ini dan berhasil:

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

  return <Input my={3}/>
}

Tetapi kemudian saya harus menggunakan composekomponen saya setiap kali saya ingin menggunakan fungsi gaya.

Jawaban

1 RyanCogswell Aug 21 2020 at 15:33

The docs menunjukkan bagaimana tema dapat parameterize Box fitur (misalnya seperti yang unit jarak adalah 4px bukan 8px) - tema tidak melakukan apa pun untuk mengaktifkan fitur tersebut.

Material-UI bermaksud untuk mendukung fitur @ material-ui / sistem pada komponen inti di v5 , tetapi itu masih beberapa bulan lagi.

Opsi utama Anda adalah melakukan sesuatu seperti yang Anda tunjukkan dalam contoh Anda (meskipun Anda harus pindah const Input = styled(TextField)(compose(spacing))ke level teratas daripada melakukan ini dalam render Aplikasi). Anda dapat meletakkan ini di file terpisah dan mengimpor komponen ini daripada TextFieldkapan pun Anda ingin menggunakan fitur tersebut. Misalnya:

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

Pilihan lain adalah dengan menggunakan Boxdengan clone prop dan membungkus komponen Anda ingin bergaya. Misalnya:

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

Anda juga dapat menggunakan componentprop dari 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>
  );
}

Jawaban terkait:

  • Material-UI Grid tidak menyembunyikan saat menggunakan Display
  • Ukuran ikon dinamis di Material-UI
  • Kotak vs className vs gaya untuk penspasian vertikal di Material UI
  • Komponen yang dapat digunakan kembali menggunakan fitur Box berbasis tema
  • Menggunakan Komponen Kotak Material-UI dengan Komposisi Laci
  • Bagaimana cara menggunakan tombol override menggunakan komponen Box di Material-UI?