Расширьте класс стиля 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