Можно ли применить стили к классам, отличным от первого, определенного в файле?

Question

Я унаследовал некоторый код и манипулировал им, но я наткнулся на то, что заставляет меня чесать голову.

Я не уверен, имеет ли место проблема, с которой я сталкиваюсь, в частности, чтобы реагировать на jjascript или CSS.js...

В этом коде мы используем response.js со стилями.

Я создал песочницу для демонстрации.

Первым делом в файле мы определяем некоторые стили, которые затем можно применить к элементам страницы, например

const styles = theme => ({
  buttonGroup: {
    width: "250px",
    display: "flex",
    flexWrap: "wrap",
  }, ...

затем, когда мы определяем класс, мы можем получить доступ к этим стилям, выполнив const { classes } = this.props например,

class MyButtons extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <div className={classes.buttonGroup}>
        {three_buttons.map(e => (
          <Button className={classes.a_button}>{e}</Button>
        ))}

      </div>
    );
  }
}

Это все хорошо и работает. Я попытался в том же файле определить второй класс, который я затем вызываю из первого (чтобы создать компонент внутри компонента).

Тем не менее const { classes } = this.props кажется, не дает мне доступ к стилям, определенным вверху, и когда я пытаюсь установить className={classes.buttonGroup} во втором классе я получаю ошибку

TypeError: read property 'buttonGroup' of undefined

Я почти уверен, что смогу преодолеть это, просто определив второй класс в отдельном файле, как я обычно делаю, но я хотел бы понять, почему это не работает.

Answer 1

Вы не передаете стили как реквизиты компоненту MyOtherButtons, и, следовательно, вы получаете эту проблему. Передайте классы, как реквизит, и все будет работать, как ожидалось. Это работает для компонента MyButtons, так как вы передаете стили, используя синтаксис withStyles.

Проверьте рабочую ссылку https://codesandbox.io/s/m3rl6o2qyj