javascript - 扩展 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);

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

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