当前位置:首页 > 编程笔记 > 正文
已解决

react中在js文件里定义的变量,如何在less文件里去使用该变量

来自网友在路上 172872提问 提问时间:2023-10-23 00:01:17阅读次数: 72

最佳答案 问答题库728位专家为你答疑解惑

在 React 中,如果在 JS 文件中定义了变量,可以使用 CSS Modules 的方式将变量导出到 LESS 文件中。

以下是示例代码:

// index.js
import React from 'react';
import styles from './styles.module.less';const color = 'red';function App() {return (<div className={styles.container}><span style={{ color }}>Hello, world!</span></div>);
}export default App;

在 JS 文件中,定义了一个名为 color 的变量,并将其传递给样式中的 span 标签。

/* styles.module.less */
@import "~antd/dist/antd.less";.container {background-color: @primary-color;
}

在 LESS 文件中,可以使用 @import 导入 Ant Design 的 LESS 文件,并使用 Ant Design 中定义的变量,例如 @primary-color,同时也可以使用 JS 文件中定义的变量,例如 color

需要注意的是,在使用 CSS Modules 时,需要将 LESS 文件的后缀名修改为 .module.less,否则会导致样式无法正确加载。

总之,在 React 中,可以使用 CSS Modules 的方式将 JS 文件中定义的变量导出到 LESS 文件中。在 LESS 文件中,可以使用 @import 导入 LESS 文件和使用 JS 文件中定义的变量。

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"react中在js文件里定义的变量,如何在less文件里去使用该变量":http://eshow365.cn/6-22022-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!