【CSS】React项目如何在CSS样式文件中使用变量

需求

在修改样式时候,需要根据不同条件,使用不同的样式,使用动态类需要多重判断,是否考虑使用变量传入的方式呢

应该怎么做

tsx

javascript 复制代码
import './App.css';
import './test.css'

function App() {
  const styles = {
    '--var': 'white',
  };
  return (
    <div className="App" style={styles}>
            <div className="custom-element">Hello, World!</div>
    </div>
  );
}

export default App;

css/less样式文件

css 复制代码
.App {
  width: 100px;
  height: 100px;
  background: red;
  line-height: 100px;
}
.custom-element {
  color: var(--var);
}

展示效果


相关推荐
冰暮流星7 小时前
css新增盒子属性——尺寸调节
前端·css
程序员爱钓鱼7 小时前
Python编程实战 - 函数与模块化编程 - 函数的定义与调用
前端·后端·python
欧阳码农7 小时前
使用AI生成的页面总是被一眼认出来怎么办?1分钟给你解决
前端·后端
IT_陈寒7 小时前
7个鲜为人知的JavaScript性能优化技巧,让你的应用提速50%!
前端·人工智能·后端
艾小码7 小时前
前端别再乱存数据了!这3种存储方案让你的应用快如闪电
前端·javascript
黄毛火烧雪下7 小时前
HTML 的底层原理
前端·html
Moment7 小时前
面经分享——字节前端一面
前端·javascript·面试
十步杀一人_千里不留行9 小时前
Google 登录集成教程(Web + Expo 移动端)
前端
gAlAxy...12 小时前
IntelliJ IDEA 四种项目构建:从普通 Java 到 Maven Web 项目
前端·firefox
my一阁12 小时前
2025-web集群-问题总结
前端·arm开发·数据库·nginx·负载均衡·web