React样式：内联样式、类、模块、框架和CSS-in-JS
推荐超级课程：
@TOC
在React中，有多种样式化你的组件和用户界面的选项。以下是三种常见的方法：内联样式、CSS类和CSS模块。
CSS样式
1. 内联样式：
使用内联样式，你可以直接使用JavaScript对象将样式应用于单个JSX元素。内联样式被定义为对象，其中键代表camelCase格式的样式属性，值是对应的属性值。
import React from 'react';
const InlineStylesExample = () => {
const textStyle = {
color: 'blue',
fontSize: '16px',
fontWeight: 'bold',
};
return <p style={textStyle}>样式化文本</p>;
};
export default InlineStylesExample;
2. CSS类：
使用CSS类是样式化React组件的常见方法。你可以在一个单独的CSS文件中定义样式，并使用className属性将这些样式应用于你的组件。
/* styles.css */
.text {
color: blue;
font-size: 16px;
font-weight: bold;
}
/* React组件 */
import React from 'react';
import './styles.css';
const CSSClassesExample = () => {
return <p className="text">样式化文本</p>;
};
export default CSSClassesExample;
3. CSS模块：
CSS模块是一种允许你将CSS样式限定到特定组件的方法。当你想要避免不同组件之间的样式冲突时，它特别有用。
/* styles.module.css */
.text {
color: blue;
font-size: 16px;
font-weight: bold;
}
/* React组件 */
import React from 'react';
import styles from './styles.module.css';
const CSSModulesExample = () => {
return <p className={styles.text}>样式化文本</p>;
};
export default CSSModulesExample;
每种方法都有其自己的优点和用例：
- 内联样式： 内联样式对于基于组件状态或props应用动态样式很有用。它们被限定到单个元素，并且不能轻易地被重用。
- CSS类： 使用CSS类是一种传统的样式组件方法。它允许你将样式与组件逻辑分离，并在不同的组件之间重用样式。
- CSS模块： CSS模块结合了内联样式和CSS类的优点。它们提供了特定于每个组件的限定样式，确保样式隔离并防止意外的副作用。
选择最适合你的项目需求、复杂性和样式组织偏好的样式方法。
第三方CSS框架
在你的React应用程序中使用第三方CSS框架可以帮助简化样式化过程，并提供你可以轻松集成到项目中的预设计组件。这些框架提供了一套标准化的样式和UI组件，可以节省你在构建用户界面时的时间和精力。
以下是 如何将第三方CSS框架整合到你的React应用程序中：
1. 安装框架：
首先使用npm或yarn等包管理器安装所需的CSS框架。例如，要安装Bootstrap：
npm install bootstrap
2. 导入样式：
将框架的CSS样式导入到你的项目中。这通常在你的主入口文件中完成，例如index.js或App.js。
import 'bootstrap/dist/css/bootstrap.min.css';
3. 使用框架组件：
现在你可以在React组件中使用框架提供的组件和样式。
import React from 'react';
import { Button, Card } from 'react-bootstrap';
const FrameworkExample = () => {
return (
<Card>
<Card.Body>
<Card.Title>React Bootstrap卡片</Card.Title>
<Card.Text>这是来自React Bootstrap的示例卡片。</Card.Text>
<Button variant="primary">了解更多</Button>
</Card.Body>
</Card>
);
};
export default FrameworkExample;
4. 自定义和扩展：
许多框架提供了自定义选项，以匹配你的项目设计。你可以覆盖样式、扩展组件并根据需要调整框架。
5. 注意样式影响：
使用第三方CSS框架可以带来很多便利，但考虑到对你的应用程序整体样式的影响是很重要的。有时，框架可能会引入CSS冲突或不必要的样式。测试并根据需要自定义样式是一个好习惯。
React中常用的第三方CSS框架包括：
- Bootstrap： 一个广泛使用的框架，提供响应式设计和丰富的组件。
- Material-UI： 实施Google的Material Design原则，并提供丰富的组件集。* Ant Design： 一套包含高质量React组件的设计系统。
- Semantic UI： 专注于人类友好的HTML，并提供了一系列主题选项。
- Bulma： 一个基于Flexbox的现代CSS框架，用于构建响应式布局。
请记住，虽然第三方CSS框架可以节省时间，但它们也可能引入一些开销和额外的样式，这些你可能并不需要。在采用之前，请评估框架是否符合你项目的需求，并考虑其权衡之处。
用于动态样式的CSS-in-JS库
CSS-in-JS库允许你在React组件中使用JavaScript编写和管理样式。这种方法提供了诸如作用域样式、基于props或状态的动态样式以及与组件逻辑的轻松集成等好处。以下是一些流行的CSS-in-JS库，你可以用于React应用程序的动态样式：
- Styled Components：
Styled Components是最广泛使用的CSS-in-JS库之一。它允许你使用标签模板文字定义样式。样式会自动限定在定义它们的组件范围内，并且可以根据props动态变化。
示例用法：
import styled from 'styled-components';
const Button = styled.button`
background-color: ${(props) => props.primary ? 'blue' : 'gray'};
color: white;
padding: 10px 20px;
border: none;
`;
const App = () => {
return (
<div>
<Button>普通按钮</Button>
<Button primary>主要按钮</Button>
</div>
);
};
export default App;
- Emotion：
Emotion是另一个流行的CSS-in-JS库，提供了强大的样式功能。它提供了与Styled Components类似的语法，并支持主题、服务器端渲染和全局样式。
示例用法：
import { css } from '@emotion/react';
const buttonStyles = css`
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
`;
const App = () => {
return (
<div>
<button css={buttonStyles}>普通按钮</button>
</div>
);
};
export default App;
- @mui/styles (Material-UI中的makeStyles):
如果你使用Material-UI，你可以使用@mui/styles包来创建与Material-UI组件和主题系统紧密集成的样式。
示例用法：
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles({
button: {
backgroundColor: 'blue',
color: 'white',
padding: '10px 20px',
border: 'none',
},
});
const App = () => {
const classes = useStyles();
return (
<div>
<button className={classes.button}>Material-UI按钮</button>
</div>
);
};
export default App;
- Glamorous：
Glamorous是另一个专注于简洁性和性能的CSS-in-JS库。它提供了一个简单的API来创建样式化组件。
示例用法：
import glamorous from 'glamorous';
const Button = glamorous.button({
backgroundColor: 'blue',
color: 'white',
padding: '10px 20px',
border: 'none',
});
const App = () => {
return (
<div>
<Button>样式化按钮</Button>
</div>
);
};
export default App;
这些库提供了各种功能和语法，用于React中的动态样式。选择一个与你的项目需求、偏好和现有工具相符合的库。
基于状态的条件样式
在React中，基于状态的条件样式允许你根据组件的当前状态动态更改组件的样式。这对于向用户提供视觉反馈或创建交互式用户界面特别有用。你可以使用CSS类或内联样式来实现这一点，具体取决于你的首选方法。
以下是如何根据组件的状态条件性地应用样式的示例：
使用CSS类：
- 在CSS文件中定义你的样式：
.highlight {
background-color: yellow;
font-weight: bold;
}
- 在你的React组件中，使用条件渲染来根据状态应用CSS类：
import React, { useState } from 'react';
import './styles.css';
const ConditionalStyling = () => {
const [isHighlighted, setIsHighlighted] = useState(false);
const toggleHighlight = () => {
setIsHighlighted(!isHighlighted);
};
return (
<div>
<p className={isHighlighted ? 'highlight' : ''}>
这段文本可以被高亮显示。
</p>
<button onClick={toggleHighlight}>切换高亮</button>
</div>
);
};
export default ConditionalStyling;
使用内联样式：
- 在在上述两个示例中，组件的状态（本例中为
isHighlighted）决定了是否应该应用条件样式。样式要么在CSS类中定义（第一个示例），要么作为内联样式对象（第二个示例）。当状态发生变化时，组件会重新渲染，并根据更新后的状态应用或移除样式。
选择与您的样式偏好和项目结构相符的方法。CSS类提供了更好的关注点分离，而内联样式提供了更动态的样式控制。