扩展 JSS 样式类而不是覆盖它

Question

在我的 React 应用程序中，我使用 React JSS 进行样式设置。假设我有这两个文件（跳过导入和其他不感兴趣的东西）。

这是 App.js：

const styles = {
  root: {
    backgroundColor: '#ffffff',
  },
  header: {
    backgroundColor: '#ff0000',
  }
};

class App extends Component {
  render() {
    const { classes } = this.props;
    return (
        <div className={classes.root}>
          <Header classes={{ root: classes.header }}/>
        </div>
    );
  }
}

export default withStyles(styles)(App);

这是 Header.js：

const styles = theme => ({
    root: {
        backgroundColor: '#0000ff',
        padding: '1em',
    },
});

class Header extends Component {
    render() {
        const { classes } = this.props;
        return (
            <header className={classes.root}>
                Hello header
            </header>
        );
    }
}

export default withStyles(styles)(Header);

我想要的是“覆盖” Header 根组件的样式而不完全覆盖它。我可以做以下两件事之一：

1. 使用<Header className={classes.header}/>，这会导致header元素具有App-root-0-1-2类，这意味着背景是蓝色的，有填充；

2. 使用<Header classes={{ root: classes.header }}/>（如上），这导致header 元素具有App-header-0-1-2 类，这意味着读取背景时没有填充。

看来我只能拥有组件定义的样式或父组件定义的样式来覆盖它。但是，我想用父级传递的样式来扩展内部样式-当然，在冲突中父级优先。在这种情况下，我希望有填充的红色背景。

我怎样才能做到这一点？这不可能 - 我需要将可编辑样式作为属性传递吗？

Answer 1

您可以提供一个外部类名并使用类名 (https://github.com/JedWatson/classnames)（或仅内联它们）有条件地呈现此类名（如果存在）：

import classNames from "classnames";

const styles = theme => ({
    root: {
        backgroundColor: '#0000ff',
        padding: '1em',
    },
});

class Header extends Component {
    render() {
        const { classes, className } = this.props;
        return (
            <header 
              className={classNames({ 
                [classes.root]: true, 
                [className]: className 
              })}>
                Hello header
            </header>
        );
    }
}

export default withStyles(styles)(Header);

然后使用它：

<Header className={classes.myParentClass} />

这将产生一个类名，例如Header-root-0-1-2 App-myParentClass-0-4-3