srcmini上一章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 例子
在这里，我们通过选择特定的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;
评论前必须登录！
注册