pengdongliang 的个人博客

记录精彩的程序人生

Open Source, Open Mind,
Open Sight, Open Future!
  menu

三种方法来实现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.使用插件

styled-components

  • 使用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类与类之间相互隔离,防止造成命名冲突。

标题:三种方法来实现React组件的样式
作者:pengdongliang
地址:https://www.p0d0.com/articles/2019/06/04/1573740605109.html