CSS笔记

• 在less/sass这样的预处理器中&的用法：

.client-filter-container {
  display: inline-block;
  cursor: pointer;

  &_filter {
    width: 80px; // 这里 & 代表 .client-filter-container
  }
}

&用于引用前面的父选择器，编译后：

.client-filter-container {
  display: inline-block;
  cursor: pointer;
}
.client-filter-container_filter {
  width: 80px;
}

• 类选择器属性动态绑定：
  • 使用import classNames from 'classnames'第三方库

const componentClassName = classNames('component__charts',className)

• • 这行代码的作用是创建一个类名字符串，它将 'component__charts' 这个基本类名与 className 变量的值合并。如果 className 是另一个有效的类名或类名的数组，classNames 函数将它们结合起来，生成一个单一的字符串，这个字符串可以作为 className 属性的值。

  • 例如：

  • 如果 className 是字符串 'active'，那么 componentClassName 将是 'component__charts active'。

  • 如果 className 是数组 ['active', 'highlighted']，那么 componentClassName 将是 'component__charts active highlighted'。

const switchToColor1 = ()=>{
    document?.body.setAttribute('xx-mode','color1');
    //-   这行代码使用了可选链操作符 `?.`，它允许你安全地访问 `document.body` 属性，
    //即使 `document.body` 是 `null` 或 `undefined` 也不会抛出错误。
    document?.body.classList.remove('color1');
    document?.body.classList.add('color2')}