CSS自定义属性在组件开发中的使用

时间：2021-06-27 17:00:47 阅读：24 评论：0 收藏：0 [点我收藏+]

技术概述
- 自定义属性的概述（技术为何）
- 自定义属性的作用（为何使用）
技术详述
- 自定义属性的使用
- 在本次项目alpha版本中的一个应用以及流程图
遇到的问题
总结
参考

技术概述

自定义属性的概述（技术为何）

自定义属性：由--开头的自命名属性称为自定义属性，同时可以给自定义属性赋予任何值。比如 --color: #000 。
变量：CSS的 var() 函数引用的自定义属性被称为变量。var() 会返回自定义属性所对应的值，同时可以被运用于相应的CSS属性。对应的即是CSS规则中的属性值。

自定义属性的作用（为何使用）

由于项目中含有过多的CSS文件会增加了维护成本。
故：

使用CSS自定义属性使得文件更加容易修改，只需要在自定义属性处修改一次，这个修改就会应用到使用该自定义属性的所有地方；
CSS自定义属性具有较强的语义化。这些语义化信息让你的CSS文件变得易读和理解。比如（--primary-color），命名能够反映该自定义属性所代表的含义；
到目前为止的浏览器都对CSS自定义属性做了比较良好的支持，这将使得CSS变得更加方便。(兼容问题不再头疼)；

技术详述

自定义属性的使用

（1）获取自定义属性的属性值。
方法：使用var()方法就能实现：
第一步：声明
```
:root {//这里的:root 涉及到一个级联问题，下面会提到
    --color: red;
}
```
第二步：取值
```
.btn {
    background-color: var(--color);
}
```
如此一来，在ClassName为btn的组件的背景色就会设置为red，而要修改是只需要修改自定义属性color的值即可。
补充：
- 缺省值
  若开发者并没有定义过--color这个变量时，那么在使用时可以通过给var()函数传递一个参数作为缺省值。
```
.btn {
    background-color: var(--color, blue);//即没有值时默认为蓝色
}
```
- 级联、作用域
  在什么时候又或是在哪里定义这些自定义属性的问题涉及到级联及作用域。
  ①当希望将--color设置为全局变量时，最简单的方法是使用 :root 伪元素;
  ②当希望在不同的模块使用不同的--color值时，只需要在模块的作用域中给属性重新声明并赋值。
（2）CSS计算用到的calc() 函数,常常被用于跨单位的计算，calc()与自定义属性结合使用也是十分方便的。（函数与自定义属性的结合使用）
```
:root{
    --all-height:667px;
}
```
```
.myList {
    min-height: calc(var(--all-height) - 88.5px - 60px);
}
```

（3）js获取自定义属性（通过特定函数取值赋值）
自定义属性也可以通过 getPropertyValue 和 setProperty 方法操作进行动态操作。

const roots = getComputedStyle(document.querySelector(‘:root‘));

const Color = roots.getPropertyValue(‘--color‘);//获取自定义属性值

root.style.setProperty(‘--color‘, ‘blue‘);//设置自定义属性值

在本次项目alpha版本中的一个应用以及流程图

例子：修改主题色

在index.css文件中声明

:root {
    --color: rgb(108,99,255);//默认颜色
}

使用

//初始化所有可选主题色
//state = {
//    value: 0,
//};
const {value} = this.state 
const data = [
    { value: 0, label: ‘基础紫‘, color: ‘rgb(108,99,255)‘ },
    { value: 1, label: ‘海天蓝‘, color: ‘rgb(15,136,253)‘ },
    { value: 2, label: ‘健康绿‘, color: ‘rgb(30,154,143)‘ },
    { value: 3, label: ‘活力红‘, color: ‘rgb(224,56,55)‘ },
    { value: 4, label: ‘樱花粉‘, color: ‘rgb(255,92,124)‘ }
];

//构造主题色选择组件
<List className={theme.checkbox}>
    {data.map(i => (
        <RadioItem key={i.value} checked={value === i.value} onChange={() => this.onChange(i.value)}>
            {i.label}
            <span style={{backgroundColor: i.color}} className={theme.show_color}></span>
        </RadioItem>
    ))}
</List>

//切换主题色函数
onChange = (value) => {
    const root = document.querySelector(‘:root‘);
    let color = ‘rgb(108,99,255)‘
    localStorage.setItem(‘themeValue‘, value);
    switch(value) {
        case 1:
            color = ‘rgb(15,136,253)‘
            break
        case 2:
            color = ‘rgb(30,154,143)‘
            break
        case 3:
            color = ‘rgb(224,56,55)‘
            break
        case 4:
            color = ‘rgb(255,92,124)‘
            break
        default: 
            color = ‘rgb(108,99,255)‘
            break
    }
    root.style.setProperty(‘--color‘, color)//修改自定义属性的值
    this.setState({
        value,
    });
};

//一处使用自定义主题色属性的地方：导航栏
<NavBar
    mode="light"
    rightContent={[
            <i style={{fontSize:"30px",color:"var(--color)"}} className="iconfont icon-help" onClick = {this.navbarImg_Click}></i>                   
    ]}
    className={NoticeCSS.NoticeNavbar}>

        <div style={{color:"var(--color)"}}>
        消 息
        </div>    
</NavBar>

流程图