三种方法来实现React组件的样式

### **1.内联方式** 
```
const styles = { TodoComponent: { width: "300px", margin: "30px auto", backgroundColor: "#44014C", minHeight: "200px", boxSizing: "border-box", }, Header: { fontSize: "20px", } } class ToDoApp extends React.Component { // ... render() { return ( <div style={styles.TodoComponent}> <h2 style={{...styles.Header, color: "red"}}>ToDo</h2> </div> ) } } 
```
***

### **2.使用插件**
<font color=red>styled-components</font>

- 使用Styled components，你可以真正地在js文件中写css代码。这意味着你可以使用所有css的功能，比如媒体查询（media queries）、伪类选择器（pseudo-selector）, 组合选择器(nesting)等等。 
- Styled-components 使用的是 ES6’s tagged template literals。使用Styledcomponents，组件和样式之间的映射将被移除，这意味着当你在写样式代码的时候，你其实正在创建一个拥有这部分样式的组件。通过styled components, 我们可以创建一个可复用的具有样式的组件，下面将介绍具体的用法。 
- 首先，我们需要安装Styled components，在项目根目录下，运行:
> `$ npm install --save styled-components`

- 接下来我们需要导入styled-components包： 
> `import styled from 'styled-components';`

- 现在我们可以开始使用它了，我们先创建一个styled component，接着我们再来看我们应该如何使用它
 ```
 const TodoComponent = styled.div` background-color: #44014C; width: 300px; min-height: 200px; margin: 30px auto; box-sizing: border-box; `; 
 ```

- 通过上面的代码我们创建了一个具有样式的组件，对于其他react组件，我们同样可以这么实现。不过，值得留意的是，我们是在JS文件中写真正的css代码。那么接下来我们将使用这个组件。
 ```
class ToDoApp extends React.Component { // ... render() { return ( <TodoComponent> <h2>ToDo</h2> <div> <Input onChange={this.handleChange} /> <p>{this.state.error}</p > <ToDoList value={this.state.display} /> </div>> </TodoComponent> ) } } 
 ```

***

### **3.CSS模块** 
- 在这里，一个CSS模块是指一个CSS文件，在CSS文件汇总，所有的类名和动画名称都会被限制在当前文件中。注意这句话，限制在当前文件中，现在我们将要破坏这个规则。 
- CSS 类名和动画名称将默认被放在全局中。如果是在一个比较大的样式文件中，这可能会导致大量冲突。一个样式的定义可能会被另一个所覆盖。而CSS模块解决了这个问题。CSS 类只会在用到它们的组件上起效。一个CSS模块实际上是一个编译过的.css文件。编译结束后我们将得到两个结果，其中一个是对类名加注版本号的CSS的文件，另一个则是一个将新类名与原始类名对应起咯爱的js对象。 
- 让我们看一下它具体是怎么使用的。如果你想更多地了解这部分内容，你可以看这篇文章。现在就让我们来创建一个给错误信息组件加样式的CSS类。这个CSS文件我们命名为 style.css :

```
.error-message { color: red; font-size: 16px; } 
 ```

- 编译完之后，我们会产生类似以下的代码 
 ```
.error-message_jhys { color: red; font-size: 16px; } 
 ```

- _jhys是我自己加的一个key，用于识别这个类。像之前所说的，这里将产生一个JS对象，我们可以在react文件中导入并使用它。 
 ```
{ error-message: error-message_jhys } 
 ```

- 让我们看一下应该怎么使用它： 
 ```
import styles from './styles.css'; class Message extends React.Component { // ... render() { return ( <p className = {styles.error-message}>I am an error message</p > ) } } 
 ```

- 务必记得，我们使用CSS模块的目的是希望通过将CSS类与类之间相互隔离，防止造成命名冲突。

Leanote's Blog

Navigation

Recent Posts

Friend Links