CSS не использует вложенные правила className

Question

Возникла проблема с созданием аккордеонного компонента.у меня есть свернутое состояние, которое передается как className, если состояние истинно, к тегу div.В CSS, что должно произойти, это то, что если свернутое className является истинным показывать контент, но происходит то, что когда кнопка (которая изменяет состояние) нажата, div получает «свернутый» className, но в css он не использует$ .collapsed вложенные правила.Любая помощь приветствуется.Не очень хорошо с css.

ErrorNotification.js

import React, { Component } from 'react'
import { Typography, Button } from 'rmwc'
import { Icon } from 'rmwc/Icon'
import cn from 'classnames/bind'
import styles from './index.css'

const cx = cn.bind(styles)

export class ErrorNotification extends Component {
  state = {
    collapsed: true,
  }

  toggleAccordion = () => this.setState({ collapsed: 
    !this.state.collapsed
  })

  buttonIcon = 'keyboard_arrow_down'

  render() {
    console.log('collapsed', this.state.collapsed)
    return (
      <div className={cx('error-notification-container')}>
        <Typography className={cx('error-notification-message')}>There 
        was an error in retrieving the configuration data.</Typography>
        <div className={cx('accordion-container', { collapsed: 
        this.state.collapsed })}>
          <div className={cx('accordion-top-section')}>
            <Button className={cx('accordion-button')} onClick= 
              {this.toggleAccordion}>
              <Icon strategy="ligature">{this.buttonIcon}</Icon>
            </Button>
          </div>
          <div className={cx('accordion-panel')}>
            <Typography>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
              sed do eiusmod tempor incididunt ut labore et dolore 
              magna aliqua.
            </Typography>
          </div>
        </div>
      </div>
    )
  }
}

ErrorNotification.css

.error-notification {
  font-weight: bold;
  border-left: 10px solid #9a2c30;
  background-color: #cb454b;
  color: #ffffff;

  & .error-notification-message {
    margin: 0px;
  }

  & .accordion-container {
    padding: 10px;

    & .accordion-top-section {
      display: flex;
      justify-content: center;
      width: 100%;

      & .accordion-button {
        width: 100%;
      }
    }

    & .accordion-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-in;
    }

    & .collapsed {
      & .accordion-panel {
        max-height: 100px;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
      }
    }
  }
}

Answer 1

Проблема в том, что вы используете неправильный селектор

.accordion-container {
  & .collapsed {
  }
}

Ваш селектор означает: выделите все элементы с классом .collapsed внутри элемента с классом .accordion-container и выглядит так в чистом виде css

.accordion-container .collapsed {
}

Но вы хотите точно выбрать .accordion-container с классом .collapsed на том же элементе, поэтому для этого вам следует использовать этот селектор

.accordion-container.collapsed

Или по вашему коду

&.collapsed

Нет пробела между & и .collapsed

Answer 2

Проблема заключается в следующем правиле:

& .collapsed {

Он выводит:

.error-notification .accordion-container .collapsed

Пока вы хотите:

.error-notification .accordion-container.collapsed

Вы можете достичьэтот результат путем удаления пробела:

&.collapsed {

Вы можете проверить это здесь: https://www.sassmeister.com/gist/a41313db236a8e7edbb9e9748117e61b

Answer 3

Убрать пробел между & и .collapsed.

Редактировать: Фактически вы можете просто упростить этот селектор, так как вложение не требуется.

.error-notification {
  font-weight: bold;
  border-left: 10px solid #9a2c30;
  background-color: #cb454b;
  color: #ffffff;

  & .error-notification-message {
    margin: 0px;
  }

  & .accordion-container {
    padding: 10px;

    & .accordion-top-section {
      display: flex;
      justify-content: center;
      width: 100%;

      & .accordion-button {
        width: 100%;
      }
    }

    & .accordion-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-in;
    }

    &.collapsed .accordion-panel {
      max-height: 100px;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }
  }
}

В SASS, если высделать это:

.parent {
  & .someClass {}
}

Он выберет .someClass детей из .parent.Если вы хотите выбрать .parent классы, которые также имеют класс .someClass, он должен выглядеть следующим образом:

.parent {
  &.someClass {}
}