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

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);

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

使用 <Header className={classes.header}/>，这会导致 header 元素具有 class App-root-0-1-2，这意味着背景是带有填充的蓝色；
使用<Header classes={{ root: classes.header }}/>（如上），导致header元素有classApp-header-0-1-2，这意味着背景被读取没有填充。

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

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

Answer 1

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

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} />

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

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

Extend JSS style class instead of overwriting it

javascript

reactjs

jss