React使用CSS样式化组件的4种方式 – ReactJS实战教程 reactcss|React

上一章ReactJS实战教程请查看：React路由router作用和用法
React中的CSS用于设置React应用程序或组件的样式，style属性是React应用程序中最常用的样式化属性，它在呈现时添加动态计算的样式。它接受驼峰格式属性中的JavaScript对象，而不是CSS字符串。有许多方法可以使用CSS将样式添加到React应用程序或组件中。在这里，我们将主要讨论四种风格的反应组件，如下所示:

内联样式
CSS样式表
CSS模块
样式化组件

1. 内联样式内联样式是用样式名的驼峰版本中的JavaScript对象指定的，它的值是样式的值，我们通常用字符串表示。
例子
App.js

import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { render() { return ( < div> < h1 style={{color: "Green"}}>Hallo srcmini!< /h1> < p>Hola, IT开发教程网.< /p> < /div> ); } } export default App;

注意：在上面的例子中，我们使用了两个大括号:
< h1 style={{color: “ Green” }}>Hallo srcmini!< /h1>。
这是因为，在JSX中，JavaScript表达式是写在花括号内的，JavaScript对象也使用花括号，所以上面的样式是写在两组花括号{{}}内的。
驼峰属性名
如果属性有两个名称，如background-color，则必须使用驼峰大小写语法编写。
例子
App.js

import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { render() { return ( < div> < h1 style={{color: "Red"}}>Hallo srcmini!< /h1> < p style={{backgroundColor: "lightgreen"}}>Hola, IT开发教程网.< /p> < /div> ); } } export default App;

使用JavaScript对象
内联样式还允许我们创建带有样式信息的对象，并在style属性中引用它。
例子
App.js

import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { render() { const mystyle = { color: "Green", backgroundColor: "lightBlue", padding: "10px", fontFamily: "Arial" }; return ( < div> < h1 style={mystyle}>Hola, srcmini!< /h1> < p>IT开发教程网.< /p> < /div> ); } } export default App;

2. CSS样式表你可以在单独的文件中为React应用程序编写样式，并使用.css扩展名保存文件。现在，你可以在应用程序中导入这个文件。
例子
App.js

import React from 'react'; import ReactDOM from 'react-dom'; import './App.css'; class App extends React.Component { render() { return ( < div> < h1>Hello srcmini< /h1> < p>React开发教程.< /p> < /div> ); } } export default App;

App.css

body { background-color: #008080; color: yellow; padding: 40px; font-family: Arial; text-align: center; }

Index.html

< !DOCTYPE html> < html> < head> < meta charset="utf-8" /> < meta name="viewport" content="width=device-width, initial-scale=1" /> < title>React App< /title> < /head> < body> < div id="app">< /div> < /body> < /html>

3.CSS模块CSS模块是向应用程序添加样式的另一种方式。它是一个CSS文件，所有的类名和动画名在默认情况下都是局部作用域的。它只对导入它的组件可用，这意味着未经你的许可，你添加的任何样式都不能应用于其他组件，而且你永远不必担心名称冲突。你可以使用.module.css扩展名(如myStyles.module.css名称)来创建CSS模块。
例子
App.js

import React from 'react'; import ReactDOM from 'react-dom'; import styles from './myStyles.module.css'; class App extends React.Component { render() { return ( < div> < h1 className={styles.mystyle}>Hello srcmini< /h1> < p className={styles.parastyle}>IT开发教程网 - ReactJS开发教程.< /p> < /div> ); } } export default App;

myStyles.module.css

.mystyle { background-color: #cdc0b0; color: Red; padding: 10px; font-family: Arial; text-align: center; }.parastyle{ color: Green; font-family: Arial; font-size: 35px; text-align: center; }

4. 样式化的组件styled-components是React的库，它使用加强CSS设计应用程序中的React组件系统的样式，这些组件系统是用JavaScript和CSS混合编写的。
styled-components提供:

自动关键的CSS
没有类名错误
更容易删除CSS
简单的动态样式
无痛的维护

安装
styled-components库在React应用程序中安装一个命令。这是:

$ npm install styled-components --save

例子
【React使用CSS样式化组件的4种方式 – ReactJS实战教程】在这里，我们通过选择特定的HTML元素来创建一个变量，比如< div>、< Title>和< paragraph>，在这里我们存储样式属性。现在我们可以使用变量名作为包装器< Div>< /Div>类React组件。
App.js

import React from 'react'; import ReactDOM from 'react-dom'; import styled from 'styled-components'; class App extends React.Component { render() { const Div:any = styled.div` margin: 20px; border: 5px dashed green; & :hover { background-color: ${(props:any) => props.hoverColor}; } `; const Title = styled.h1` font-family: Arial; font-size: 35px; text-align: center; color: palevioletred; `; const Paragraph = styled.p` font-size: 25px; text-align: center; background-Color: lightgreen; `; return ( < div> < Title>样式化组件例子< /Title> < p>< /p> < Div hoverColor="Orange"> < Paragraph>Hello srcmini!!< /Paragraph> < /Div> < /div> ); } } export default App;