reactjs - 在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”等内容，我需要能够将现有主题传递给它.单位'。

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

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

className={classes.layout.header}

Answer 1

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

在 Codesandbox我创建了两个仪表板组件。一个使用 styled-components 只是为了展示 ThemeProvider 如何工作，另一个组件使用 withStyles。

对于withStyles工厂，我在演示中将其称为sharedStyles，通过它，您可以通过调用它并将其传播为新样式来在组件内创建一个新的样式对象(仅当您需要添加更多样式时)。

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

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

ThemeProvider 正在使用 React Context-Api 。