CSS 不使用嵌套的 className 规则

Posted 2023-02-22

【中文标题】CSS 不使用嵌套的 className 规则

【英文标题】：CSS not using nested className rules

【发布时间】：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 如果答案对您有帮助，您应该将其标记为答案。这也会对其他人有所帮助

【参考方案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