在 material-ui 中复用自定义样式

Question

这里是 material-ui 的新手，并试图找出在 js 中使用 css 的最佳方式。我可以从演示代码中看到，使用 'withStyles' 将样式作为类插入非常容易，但是如果我执行以下操作，我需要在每个组件中重新创建 'grow' 和 'defaultPadding' 样式。

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';


function Dashboard(props) {

    const { classes } = props;

    return (

        <Paper className={classes.defaultPadding}>
            Hello
        </Paper>
    );

}

const styles = theme => ({
    grow: {
        flexGrow: 1
    },
    defaultPadding: {
        padding: theme.spacing.unit * 3 + 'px'
    }
});


export default withStyles(styles)(Dashboard);

我可以轻松地在外部文件中创建一个工厂方法，该方法返回一个包含我所有默认样式的大型对象，但是如果我想使用诸如“theme.spacing.unit”之类的东西，我需要能够将现有主题传递给它.

那么，有没有办法创建一堆我自己的可重用样式，使用主题值，然后将它们导入任何组件？

额外问题：是否可以创建嵌套对象，以便我可以做这样的事情？...

className={classes.layout.header}

Answer 1

我认为创建一个外部工厂方法会起作用，或者您也可以创建一个ThemeProvider将您的主题传递给需要相同样式的每个组件。

在Codesandbox 中，我创建了两个 Dashboard 组件。一个styled-components只是为了展示一个ThemeProvider是如何工作的，另一个组件正在使用withStyles.

对于withStyles工厂，我sharedStyles在演示中调用了它，您可以通过调用它并将其扩展为新样式（如果您需要添加更多样式）在组件中创建一个新样式对象。

styles似乎不支持在内部嵌套。您可以layout.heading在使用对象之前创建类似或展平对象的键（请参阅演示中的代码）。两者都不完美，我不会使用它。

我个人styled-components更喜欢，但你不需要切换到它。您可以查看他们如何实现它的源代码，并在您的代码中使用它来将主题传递给您的组件。

在ThemeProvider使用阵营上下文的API。