CSS 不使用嵌套的 className 规则答案

【问题标题】：CSS not using nested className rulesCSS 不使用嵌套的 className 规则
【发布时间】：2019-03-30 09:21:44
【问题描述】：

在创建手风琴组件时遇到问题。我有一个折叠状态，如果状态为真，它作为类名传递给 div 标签。在 css 中，应该发生的是，如果折叠的 className 为 true，则显示内容，但是当单击按钮（更改状态）时，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;
      }
    }
  }
}

【问题讨论】：

那不是 vanilla css，您确定您的 sass 正在被预处理并转换为 vanilla css？
我看到了error-notification-container，但我在你的html中没有看到error-notification？
@SuperDJ 那是因为我正在使用 react toastify 来呈现附加了 className 的错误通知组件。代码如下所示：export const renderErrorNotification = details => { toast.error(<ErrorNotification details={details} />, {className: cx('error-notification')}) }，因此它在渲染后绑定了 className。
@Ted 是的，sass 正在对其进行预处理，并捕获其他规则。唯一未被处理的规则是.collapsed 类规则。
@Ben 如果答案对您有帮助，您应该将其标记为答案。这也会对其他人有所帮助

标签： javascript html css reactjs sass

【解决方案1】：

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

它将选择.parent 的.someClass children。如果您希望它选择也具有.someClass 类的.parent 类，它需要是这样的：

.parent {
  &.someClass {}
}

【讨论】：

【解决方案2】：

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

.accordion-container {
  & .collapsed {
  }
}

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

.accordion-container .collapsed {
}

但是你想在同一个元素上精确选择 .accordion-container 类 .collapsed，所以，为此，您应该使用此选择器

.accordion-container.collapsed

或者根据你的代码

&.collapsed

总结：&和.collapsed之间没有空格

【讨论】：

【解决方案3】：

问题在于这条规则：

& .collapsed {

输出：

.error-notification .accordion-container .collapsed

而你想要的是：

.error-notification .accordion-container.collapsed

你可以通过去掉空格来达到这个效果：

&.collapsed {

您可以在这里查看：https://www.sassmeister.com/gist/a41313db236a8e7edbb9e9748117e61b

【讨论】：