reactjs - 如何在 createMuiTheme() 中创建 css 类并直接使用它们，而不必从组件 "classes"属性中获取其值？

Question

我试图避免输入多余的代码。在多个组件中，我创建了相同的 css 类。我想使用 createMuiTheme() 将它们添加到主题中，然后仅直接使用主题中的样式，而不必在组件 Prop 上调用“类” Prop 。

我尝试在根组件上创建一个主题，如下所示:

const theme = createMuiTheme({
  palette:{
      primary: {
        main: '#47286E',
        light: '#D91677'
      },
      secondary: {
        main: '#9156D8' 
      },
  },

 fab: {
    position: "relative",
    top: 0,
    marginTop: 20px
    textTransform: 'none',
    width: 220,
    height: 50
  },

});

然后我使用将主题传递给其他组件

<MuiThemeProvider theme={theme}>

我尝试直接在组件内导入 fab 按钮

<Fab variant="extended" className={this.props.theme.fab} size='small'>
    Change
</Fab>

但是，当我尝试获取 fab css 类时，我似乎没有获得任何值(value)。我只是不想创建一个全新的

const styles = theme => {
    blabbla
}

如果我想要的主题已经在传递给其子组件，则使用“classes” Prop 将其导入到每个组件中。

Answer 1

我认为 createMuiTheme 不是为此目的。

或者，您可以只创建一个要重用的样式对象

const styles = {
  fab: {
    position: "relative",
    top: 0,
    marginTop: 20px
    textTransform: 'none',
    width: 220,
    height: 50
  }
};

只需在需要的地方导入并使用它即可

import fabStyles from '../../somewhere-everyone-can-get-it.js';
import styles from './styles-for-this-component.js';

...

withStyles({...fabStyles, ...styles})(Component);

如果您需要主题和样式。

withTheme(withStyles({...fabStyles, ...styles})(Component));

您还可以使用recompose来清理它。