material-ui - 在 Material-UI 组件样式中重复使用主题样式 block

Question

考虑 SASS mixin 的概念，什么是能够重用包含当前主题的样式 block 的最佳方法。

例如我有两个导入各自样式的组件:

• 第 1 部分
  • 索引
  • 风格
• 第 2 部分
  • 索引
  • 风格

每个组件都有一个文本 block

组件 1

import { styles } from './styles'
....
<div className={classes.richText}>...</div>

组件 2

import { styles } from './styles'
....
<div className={classes.richText}>...</div>

richText 的样式相同，但我不想在导入的样式文件中重复它们。

我宁愿有一个文件来公开基于主题的可重用 CSS 属性。

我目前能做到这一点的唯一方法是返回一个我已将主题传递给例如的对象

const RichText = (theme) => {
 return {
  fontWeight: 100,
  color: theme.typography.body1.color
 }
}

然后将其导入到样式中

组件 1

样式.js

import { RichText } from '../mixins/'

const styles = theme => ({
 richText: {
  ...RichText(theme),
  fontSize: '1rem'
 }

组件 2

样式.js

import { RichText } from '../mixins/'

const styles = theme => ({
 richText: {
  ...RichText(theme),
  fontSize: '1.2rem'
 }

感觉必须有更好的方法:也许利用 withTheme()？

Answer 1

假设您要自定义一个复选框，如下所示:

import { makeStyles } from '@material-ui/core/styles';
import CheckBox from '@material-ui/core/CheckBox';

const useStyles = makeStyles((theme) => ({
  root: {
    color: theme.status.danger,
    '&$checked': {
      color: theme.status.danger,
    },
  },
  checked: {},
}));

function CustomCheckbox() {
  const classes = useStyles();

  return (
    <Checkbox
      defaultChecked
      classes={{
        root: classes.root,
        checked: classes.checked,
      }}
    />
  );
}

并且您想尽可能多地重用它的样式。

您有两个选择:ThemeProvider 或导出您的自定义样式。

改变组件的主题

Themes let you apply a consistent tone to your app. It allows you to customize all design aspects of your project in order to meet the specific needs of your business or brand.

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import orange from '@material-ui/core/colors/orange';

const myTheme = createMuiTheme({
  status: {
    danger: orange[500],
  },
});

export default function CustomStyles() {
  return (
    <ThemeProvider theme={myTheme}>
      <CustomCheckbox />
    </ThemeProvider>
  );
}

导出自定义样式

将您的组件放在适当的文件夹中，即:./assets/styles:

import { makeStyles } from '@material-ui/core/styles';

export const useCheckBoxStyles = makeStyles((theme) => ({
  root: {
    color: theme.status.danger,
    '&$checked': {
      color: theme.status.danger,
    },
  },
  checked: {},
}));

还有你的组件树./components:

import { useCheckBoxStyles } from './assets/styles';

function CustomCheckbox() {
  const classes = useCheckBoxStyles();

  return (
    <Checkbox
      defaultChecked
      classes={{
        root: classes.root,
        checked: classes.checked,
      }}
    />
  );
}

引用资料

https://material-ui.com/customization/theming