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 className={classes.header}/>，这会导致header元素具有类App-root-0-1-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

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

1 个答案: