React CSS
React中的CSS用于对React App或组件进行样式设置。 style 属性是React应用程序中样式设置最常用的属性，它会在渲染时添加动态计算的样式。它接受 camelCased 属性中的JavaScript对象，而不是CSS字符串。有多种方法可以使用CSS向您的React App或组件添加样式。在这里，我们将主要讨论四种样式化React Components的方式，如下所示:
内联样式
CSS样式表
CSS模块
样式化的组件
1、内联样式
内联样式是使用camelCase版本样式名称中的JavaScript对象指定的。它的值是样式的值，通常我们使用一个字符串。
示例
App.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>
<h1 style={{color: "Green"}}>Hello lidihuo!</h1>
<p>Here, you can find all CS tutorials.</p>
</div>
);
}
}
export default App;
注意: 您可以在上面的示例中看到，我们在其中使用了两个花括号: 。这是因为在JSX中，JavaScript表达式写在花括号内，而JavaScript对象也使用花括号，因此上述样式写在两组花括号{{}}中。
输出
camelCase属性名称
如果属性具有两个名称，例如 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"}}>Hello lidihuo!</h1>
<p style={{backgroundColor: "lightgreen"}}>Here, you can find all CS tutorials.</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}>Hello lidihuo</h1>
<p>Here, you can find all CS tutorials.</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 lidihuo</h1>
<p>Here, you can find all CS tutorials.</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 lang="en">
<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 的CSS模块，例如 myStyles.module.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 lidihuo</h1>
<p className={styles.parastyle}>It provides great CS tutorials.</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、样式化组件
样式化组件是React的库。它使用增强型CSS来对应用程序中的React组件系统进行样式设置，并使用JavaScript和CSS混合编写。
样式化组件提供:
自动关键CSS
没有类名错误
更容易删除CSS
简单的动态样式
简易维护
安装
样式化组件库仅需一条命令即可在您的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>Styled Components Example</Title>
<p></p>
<Div hoverColor="Orange">
<Paragraph>Hello lidihuo!!</Paragraph>
</Div>
</div>
);
}
}
export default App;
输出
现在，执行App.js文件，我们将获得如下所示的输出。
当我们将鼠标指针移到图像上时，其颜色将发生变化，如下图所示。
