React js教程:React 中的样式和 CSS(9)

作者 : 慕源网 本文共4021个字,预计阅读时间需要11分钟 发布时间: 2021-10-26 共219人阅读

本文是React 教程系列的一部分。您可以在此处找到本系列之前所有帖子的链接

介绍

上一篇文章中,我们了解了 React 中的条件渲染和列表渲染,并了解了有多少种方式可以使用条件渲染。我们在列表渲染中使用了 Array.Map()。现在,在本文中,我们将了解 React 中的样式和 CSS 基础知识,以及样式化组件如何在 React 中工作。

React 中的样式

在 React 中有 4 种样式可以完成的方式。

  • CSS 样式表
  • 内联样式
  • CSS 模块。
  • JS 库中的 CSS。

要指定 CSS 类,我们可以使用 className 属性。这将适用于所有 DOM 和 SVG 元素。

CSS 样式表

这种样式涉及在我们的组件中导入外部 CSS 文件。这与我们在 HTML 表单中使用的方式相同。使用这种方法,我们可以为每个组件创建单独的文件。

例如,

我创建了一个名为 custom.css 的文件,其中包含以下代码

.error{  
color:red  
}  
  
.info{  
color: blue  
}  
现在,在组件文件中导入 css 文件
import React from 'react';  
import '../css/custom.css';  
  
const Messages = () =>(  
       <div>  
              <p className="error">This is Error</p>  
              <p className="info">This is information</p>  
       </div>  
)  
export default Messages; 

这将显示一个输出。

React js教程:React 中的样式和 CSS(9)

内联样式

此样式不是字符串。它包含一个驼峰格式的key-value,具有样式名称及其值。该值通常是一个字符串。

在这里,我们可以使用 style={nameofvariable} 作为传递创建的变量名或直接传递样式 style={{color:’red’}}

例如,

在我们的组件中,我们将定义一个包含样式key-value对的对象

import React from 'react';  
const error ={  
    color: 'red',  
    fontWeight:'bold',  
    fontSize:'14'  
}  
  
const info ={  
    color: 'blue',  
    fontWeight:'italics',  
    fontSize:'16'  
}  
  
const Messages = () =>(  
    <div>  
        <p style={error}>This is Error</p>  
        <p style={info}>This is information</p>  
    </div>  
)  
  
export default Messages; 

输出将显示如下。

React js教程:React 中的样式和 CSS(9)

CSS 模块

在类模块中,每个类名和动画都在本地作用于导入它的组件。这样,可以根据需求使用命名约定,而不必担心全局冲突,因为 React 使用组件,并且每个组件在导入之前都是独立的。

例如,

custom.css

.error {  
   color:red;  
   font-weight: bold;  
   font-Size :14  
}  
  
.info{  
   color: blue;  
   font-weight:'italics';  
   font-size:'16';  
}  
在样式组件中,
import React from 'react';  
import styles from '../css/custom.css';  
class Messages extends React.Component{   
     render(){   
          return(  
               <div>  
                    <p className={styles.error}>This is Error</p>   
               </div>  
          )  
     }  
}  
export default Messages;  

这将显示如下输出。

React js教程:React 中的样式和 CSS(9)

在上面的快照中,我们可以看到没有应用 CSS,原因是在 React 中使用 CSS Modules 概念,CSS 文件的命名约定应该是 <ModuleName>.module.css

现在将文件名更改为 Messages.module.css 并在 Messages.js 文件中更新其导入名称。现在输出将显示如下:

React js教程:React 中的样式和 CSS(9)

CSS Modules 允许类组合,因为一个类可以在另一个类中继承。也可以同时扩展多个类。此功能允许将现有类与新类一起使用。

CSS-In-Js(样式组件)

样式化组件是 Css-In-Js 库,其中包括使用模板文字来设置所需组件的样式。此技术用于编写 CSS 代码来自定义您的组件,并且它也不会与其他元素或组件发生冲突。

样式组件的好处

自动关键 CSS – 样式组件会跟踪页面上呈现的组件并添加它们的样式,并且不会执行任何其他操作,从而使其完全自动化。

条件渲染 – 样式化组件具有基于 props 值实现样式的功能,而其他任何 CSS 方法(如 SASS、LESS 等)都没有提供这些功能。

易于维护 – 样式组件提供快速更改,因为我们不需要浏览所有 CSS 文件来搜索 CSS,或者如果它可能会影响其他组件,因为它是按组件实现的。

没有类冲突 – 样式组件中的类名没有冲突,因为每个样式都绑定到其组件并生成唯一的类名。

要使用样式化组件,我们需要执行以下 2 个步骤

首先,要使用样式组件首先使用下面给出的命令通过 npm 管理器安装样式组件。

npm i styled-components  
现在,第二件事。我们需要在我们的组件中导入我们的样式组件。
import styled, { css } from 'styled-components';  

完成以上2个步骤后,我们就可以继续使用样式组件了。

让我们看一下 Styled Components 的演示

创建了一个名为 UserForm.js 的组件文件

import React,{Component} from 'react';  
import styled from 'styled-components';  
  
const Textarea = styled.textarea`  
         padding: 10px 5px;  
         background-color:black;  
         color:white;  
`;  
  
const Button = styled.button`  
         padding: 5px;  
         color : black;  
         background-color: gray  
`  
const Label = styled.label`  
         color : black;   
         background-color: yellow  
`  
  
class UserForm extends Component{  
         render(){  
                  return(  
                           <div>  
                                    <Label>Enter Name</Label>  
                                    <Textarea type="text"></Textarea>  
                                    <Button type="submit">Submit</Button>  
                           </div>  
                  )  
         }  
}  
  
export default UserForm;  
现在在 App.js 文件中导入该表单
import React from 'react';  
import logo from './logo.svg';  
import './App.css';  
import UserForm from "./components/UserForm";  
  
function App() {  
       return (  
              <div className="App">  
                     <header>  
                            <img src={logo} className="App-logo" alt="logo" />   
                     </header>  
                     <UserForm></UserForm>  
              </div>  
       );  
}  
  
export default App;  

这将显示如下输出,

React js教程:React 中的样式和 CSS(9)

与 React 中的样式和 CSS 相关的常见问题解答,

如何在 React 的组件中添加 CSS 类?

在 React 中,我们可以将 prop 作为 className 传递给元素,以在 camelCase 中定义 CSS 类。

<p className=”error”>Error</p>  

可以在 React 组件中使用内联样式吗?在组件中使用哪种技术更好?

是的,内联样式可以在 React 中使用。但是使用内联样式并不比 React 更可取。使用 CSS 类在性能方面比内联样式更好。

哪些浏览器支持样式化组件?

样式组件由以下支持,

  • V2.x (React v0.14+):IE9、Chrome、Edge。
  • V3.x (React v0.14+):IE9+、Chrome、Edge。
  • V4.x (React v16.3+):IE11、IE9、Chrome、Edge。

Chrome 和 edge 被称为 Evergreen 浏览器,因为它们可以在不依赖于需要安装的操作系统的情况下进行更新。

为什么不应该在 render() 方法中声明样式组件?

在组件的 render() 方法中声明样式组件时,React 会在每次渲染时重新编译 DOM 子树的那部分,而不是仅仅观察前一个节点的变化。这将导致性能和行为问题。因此,最好在组件定义上方使用样式化组件。

例子:

不应该使用下面的代码,因为每次渲染组件时只考虑更改。

const User = () => {  
    const Button = `  
        color: black;  
        background-color: white;  
    `  
  
    return(  
        <div>  
            <button>Click Me</Button>  
        </div>  
    )  
}  
我们可以使用以下代码来提高性能,并且只会检查已完成的更改。
const Button = `  
      color: black;  
      background-color: white;  
`  
  
const User = () => {  
      return(  
            <div>  
                  <button>Click Me</Button>  
            </div>  
      )  
}  

React 表单基础

HTML 表单元素的工作方式与它们在 React 中的工作方式略有不同。这是因为表单元素有一些内部状态。当用户提交表单时,此表单行为具有提交到新页面的默认 HTML 行为。同样的概念也适用于 React,但有时会失败,因此最好使用 JavaScript 函数来访问提交的数据。这可以使用称为“受控组件”的技术来实现。

结论

在本文中,我们回顾了一些基本的样式和 CSS,以及如何在 React 中使用它,以及样式化组件和 CSS 模块的一些基本实现。在下一篇文章中,我们将了解 Form 的细节以及如何在 React 和 Component of Lifecycle 方法中使用它。

本系列的下一篇 > React 中的表单


慕源网 » React js教程:React 中的样式和 CSS(9)

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录