Question

创建手风琴组件时遇到问题。我有一个折叠状态，如果状态为true，则将其作为className传递给div标签。在CSS中，应该发生的情况是，如果折叠的className为true，则显示内容，但是发生的情况是，当单击按钮（更改状态）时，div获得“折叠”的className，但是在CSS中，它不使用$。崩溃的嵌套规则。任何帮助表示赞赏。不太适合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

问题是这个规则：

& .collapsed {

它产生输出：

.error-notification .accordion-container .collapsed

您想要的是什么

.error-notification .accordion-container.collapsed

您可以通过删除空格来实现此结果：

&.collapsed {

您可以在此处查看此内容：https://www.sassmeister.com/gist/a41313db236a8e7edbb9e9748117e61b

Answer 2

删除&和.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 {}
}

Answer 3

问题是您使用了错误的选择器

.accordion-container .collapsed {
}

您的选择器的意思是：在.accordion-container类的元素内选择所有.collapsed类的元素，并且在纯CSS中看起来像这样

.accordion-container.collapsed

但是您想在同一元素上完全选择类为.collapsed的.accordion-container，因此，为此，您应该使用此选择器

&.collapsed

或者根据您的代码

recurrentState

＆和.collapsed之间没有空格

CSS不使用嵌套的className规则

ErrorNotification.js

ErrorNotification.css

3 个答案: