reactjs - 对 Box 以外的 material-ui 组件使用样式函数

Question

我刚开始使用 Material UI。谢谢你陪我。
我知道你可以使用 <Box mx={2}> 之类的东西开箱即用 (ha)。因此，如果我想在周围放置一个边距，例如 TextField ，我可以把它包在一个盒子里。
有没有一种简单的方法来设置我的应用程序的主题，以便 任何 组件可以使用那些样式函数 Prop 吗？ ( m 、 p 、 display 等)
这样我就可以<TextField mx={2}/>无需将其包裹在 Box 中.
docs暗示你可以这样做:
(该示例使用来自 ThemeProvider 的 styled-components，但我假设 MUI 的 ThemeProvider 的工作方式相同？？？)

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

我试过了，但它从 TextField's 崩溃了 my支柱:

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

我可以做这样的事情，它的工作原理:

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

  return <Input my={3}/>
}

但后来我不得不 compose每次我想使用样式函数时，我的组件。

Answer 1

docs展示了主题如何参数化 Box 功能(例如，间距单位是 4px 而不是 8px)——主题没有做任何事情来启用这些功能。
Material-UI 打算 support @material-ui/system features on core components in v5 ，但这还需要几个月的时间。
您的主要选项正在执行您在示例中显示的操作(尽管您应该将 const Input = styled(TextField)(compose(spacing)) 移至顶层，而不是在 App 的渲染中执行此操作)。你可以把它放在一个单独的文件中并导入这个组件而不是 TextField每当您想使用这些功能时。例如:
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>
  );
}

另一种选择是使用 Box与 clone prop并包装您想要设置样式的组件。例如:

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

您也可以使用 component Box 的 Prop :

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

相关回答:

Material-UI Grid does not hide whe use Display

Dynamic icon size in Material-UI

Box vs className vs style for vertical spacing in Material UI

Reusable component using theme-based Box features

Using Material-UI Box Component with the Drawer Compoment

How to use override Button using Box component in Material-UI?