【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);
}

展示效果


相关推荐
ohMyGod_1231 分钟前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜054 分钟前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界4 分钟前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku7 分钟前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员11 分钟前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句12 分钟前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿13 分钟前
Web第二次笔记
前端·javascript
良辰未晚14 分钟前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas
Dream耀18 分钟前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript
P7Dreamer19 分钟前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js