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中，我创建了两个仪表板组件。一个与styled-components一起使用只是为了展示ThemeProvider的工作方式，另一个组件正在使用withStyles。

在withStyles工厂中，我在演示中将其称为sharedStyles，这样您就可以在组件内部创建一个新样式对象，方法是调用它并将其传播为新样式（只要您需要添加更多样式）。

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

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

ThemeProvider正在使用React Context-Api。

在Material-UI中重用自定义样式

1 个答案: