React 组件样式的最佳实践
介绍
在任何 React 应用中，组件都是该应用的基本构建块。为这些组件设计样式也至关重要，因为客户端将与应用进行交互，并且需要在外观和感觉方面拥有良好的整体体验。
我们的组件样式有很多种，每种方式都有各自的优点和缺点。
我们将研究我们拥有的各种选项，以及与之相关的一些最佳实践。
内联 CSS
我们可以添加内联 CSS，这些 CSS 被指定为属性并传递给元素。它们被指定为一个对象，其键为驼峰式样式名称，值是实际样式值（而不是字符串）。
下面是相同示例：
const myStyle = {
color: '#ffffff',
backgroundColor: '#000000',
};
function MyFirstComponent() {
return <div style={myStyle}>My First React Component!</div>;
浏览器将会呈现如下内容：
<div style="color: #ffffff; backgrond-color: #000000;">My First React Component!</div>
JS 中的 CSS
在这种方法中，我们向整个 DOM 添加样式元素，而不是将属性附加到 DOM 节点（如第一种方法，即内联样式）。
下面是相同示例：
import styled from 'styled-components';
const MyTitle = styled.div`
color: blue,
background: yellow
`
<MyTitle>My First CSS-in-JS React component!</MyTitle>
浏览器将会呈现如下内容：
<style>
.hash999s99 {
background-color: black;
color: white;
}
</style>
<div class="hash999s99">My First CSS-in-JS React component!</div>
这些实际上是样式化的组件，似乎是最佳实践之一，因为它们只会影响它们被渲染的特定组件，而不会影响应用程序中的任何其他地方。
使用样式化组件是组织 React 组件的一种非常好的方式。我们不必用大量的 div/span 元素弄脏 JSX 代码。我们可以简单地使用组件自己的样式来渲染它们。此外，由于这种方法没有任何内联样式，我们的代码变得易于阅读。而且，更重要的是，我们可以随时更改 CSS，而不必担心它是否会对任何其他组件产生影响。
CSS 模块
CSS 模块对于在本地限定 CSS 类名的作用域非常有用。下面是一个例子。我们将定义两个文件：
- MyBtnComponent.css - 这是我们的 CSS 模块，我们将在其中定义正常的 CSS 代码。
- MyBtnComponent.js——这是我们的 React 组件，它将渲染使用我们上面定义的 CSS 类的按钮。
/*MyBtnComponent.css*/
.btn {
color: #ffffff;
padding: 0.5rem;
margin-top: 0.5rem;
border-radius: 4px;
background-color: #000000;
}
/*MyBtnComponent.js*/
import React from 'react';
import styles from './MyBtnComponent.css';
class MyBtnComponent extends React.Component {
render() {
return (
<button className={styles.btn}>
Click for CSS Modules !
</button>
);
}
export default MyBtnComponent;
生成的 CSS 如下所示：
.MyBtnComponent_btn_1EEOu {
color: #ffffff;
padding: 0.5rem;
margin-top: 0.5rem;
border-radius: 4px;
background-color: #000000;
}
本质上，在 CSS 模块方法中，我们有一个带有基本/本地 CSS 类名的普通 CSS 文件，该文件经过 CSS 模块编译器，我们得到一个带有重命名 CSS 类名的更改后的 CSS 版本。
因此，“btn”是本地类名，并且会转换为全局类名：“MyBtnComponent_btn_1EEOu”。
需要做的就是在 CSS 模块中定义 .btn{}，并在组件中使用 style.btn 引用它。
结论
如果我们看看所讨论的各种方法的优缺点，似乎在组件本身中设置组件样式是可以遵循的最佳实践之一。不过，正确的方法可能因您的应用特定需求而异。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~