我们都知道如何将样式表链接到HTML ,但是在React单页应用程序(SPA)中的样式提供了更多选择。让我们探索React中CSS的各种方法,强调其优势和劣势。
此方法反映了传统的CSS链接。
style.css
)。导入“ ./style.css”;
例子:
从“反应”中导入反应; 导入“ ./components/css/app.css”; 功能应用程序(){ 返回 ( <div classname="main"></div> ); } 导出默认应用;
这将从/Components/css
文件夹中导入App.css
。
尽管由于关注可维护性,但通常会劝阻大型项目,但在特定情况下,内联风格可能是实用的。 React的组件结构可缓解一些可维护性问题。
一个简单的例子:
<div classname="main" style="{{" color:></div>
更有条理的方法使用样式对象:
从“反应”中导入反应; 功能应用程序(){ const样式= { 主要的: { 背景色:“#f1f1f1”, 宽度:“ 100%”, },, inputText:{ 填充:“ 10px”, 颜色:“红色”, },, }; 返回 ( <div classname="main" style="{styles.main}"></div> ); } 导出默认应用;
这适用于styles
对象中定义的样式。注意使用卷曲括号进行对象引用。
CSS模块提供本地范围的班级名称,以防止较大的应用程序中的命名冲突。每个组件都有自己独特的类名称。
.module.css
文件(例如styles.module.css
)。className
:/ * styles.module.css */ .font { 颜色:#f00; 字体大小:20px; }
从“反应”中导入反应; 来自“ ./styles.module.css”的导入样式; 功能应用程序(){ 返回 ( <h1 classname="{styles.font}">你好世界</h1> ); } 导出默认应用;
样式组件提供了一种在JavaScript中编写实际CSS的方法,从而创建了样式的React组件。好处包括独特的班级名称,动态样式和更好的CSS组织。
安装: npm install styled-components
导入: import styled from 'styled-components';
例子:
从“反应”中导入反应; 从“样式组件”中导入样式; const wrapper = styplet.div` 宽度:100%; 身高:100px; 背景色:红色; 显示:块; `; 功能应用程序(){ 返回<wrapper></wrapper>; } 导出默认应用;
样式组件允许使用CSS中的道具有条件的样式,从而基于组件状态或道具实现动态样式更改。此示例使用三元操作员进行有条件的样式:
(示例代码证明了为简洁而省略的条件样式,但解释了概念。)
React提供不同的CSS样式选项。最佳方法取决于项目规模,复杂性和个人喜好。此概述为选择正确的React项目选择正确的方法提供了坚实的基础。
以上是在React中编写CSS的不同方法的详细内容。更多信息请关注PHP中文网其他相关文章!