React 中的原始 CSS 与内联样式
介绍
样式表是任何网络或移动应用程序的重要组成部分，用于美化使用 HTML 等脚本语言创建的元素。每个元素都需要单独的 CSS 规则才能实现样式表效果。
React 通过使用样式表文件支持内联和原始 CSS，可以使用各种预处理器（如 SCSS、CSS、SASS 等）来实现。在本指南中，您将了解原始 CSS 和内联 CSS 之间的区别。
何时可以使用内联 CSS？
内联 CSS 是为组件中的各个元素分配样式的最常规方法之一，但 React 中的内联 CSS 仅可在样式依赖于状态或 props 值时使用。
这意味着只有当所需值来自状态或道具对象时才可以分配样式。
下面的示例是一种将内联 CSS 分配给任何 React 元素的简单方法。
如下所示设置状态变量。
constructor() {
super();
this.state = {
isSectionSelected: true
};
}
下一步是根据状态变量添加内联样式，如下所述。
render() {
const { isSectionSelected } = this.state;
return (
<div>
<div
style={{
color: isSectionSelected ? "red" : "blue"
}}
>
This is a section to be selected/deselected
</div>
</div>
);
}
在上面的例子中，观察到有一个状态变量isSectionSelected，因此根据其值（true / false），特定的样式值将应用于元素。
因此，这种情况可能更适合使用内联 CSS，其中元素的样式不是固定的，需要根据绝对值进行更新。
何时可以使用原始 CSS？
原始 CSS 可以通过多种方式定义，例如在单独的文件中设置 CSS、将 CSS 类实现到组件文件中以及分配给变量。
在组件中创建样式表的最可取方法是使用Stylesheet，如下所述。
const styles = StyleSheet.create({
color: "blue",
fontSize: "10px",
padding: "13px"
});
然后，您可以将该样式表分配给元素，如下所示。
<div style={styles.xyz}>
<table> ... </table>
</div>
因此，可以根据样式表定义提供的样式将样式直接应用于元素。
您还可以使用另一种方法，即创建单独的 CSS 样式表文件并将类分配给元素，如下所示。
样式.css
.table1 {
background: silver;
}
.table2 {
font-size: 22px;
padding: 10px
}
下一步是导入本地 CSS 文件。
import "./style.css";
接下来，为了演示，让我们使用<table>元素以及各个行和列，并将类名与元素一起应用。
render() {
return (
<div>
<table border="2" className="table1 table2">
<tr>
<td>Row1 Col1</td>
<td>Row1 Col2</td>
</tr>
<tr>
<td>Row1 Col1</td>
<td>Row1 Col2</td>
</tr>
<tr>
<td>Row1 Col1</td>
<td>Row1 Col2</td>
</tr>
</table>
</div>
);
}
名为classNames的 prop接受给定的 CSS 类的名称，然后将样式应用于相应的元素。
原始 CSS 和内联 CSS 之间的主要区别
在本指南中，我们看到了内联样式和 CSS 类的示例，这两种方法对于设计 React 组件的样式都很有用。
通过样式表文件，您可以实现应用模块化，因为与单个模块相关的每个样式都位于单独的文件中。但是，使用内联样式，识别和更新 CSS 更改具有挑战性。
内联样式实现的代码可读性最差，而使用原始CSS管理样式则易于维护。
内联样式在 DOM 中占用更多空间，因为所有样式都是与 DOM 元素一起在内部定义的，而原始 CSS 是单独描述的，因此在编译文件时不会给编译器带来任何问题。
结论
如果您知道并理解开发 Web 或移动应用程序时可能的方法，那么在 React 中设计组件或元素的样式非常简单。
在本指南中，您学习了如何在设置组件样式时使用内联样式方法和原始 CSS 方法，我建议您根据应用程序要求明智地选择路径。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~