在React组件中为组件应用样式的多种方式

迪鲁宾
853 阅读5分钟

本文展示了给组件应用样式的多种方法。 第一种方法，使用样式对象给反应组件应用内联样式 第二种方法，在React组件中使用导入CSS文件 第三种方法，在javascript中使用css，使用styled-component 第四种方法，SASS CSS预处理器，和LESCSS，Stylus预处理器语言

React是一个用于UI组件的javascript库。CSS st被应用于一个组件的样式。 React使用JSX

  • 内联样式

创建一个React应用程序

打开终端运行npx create-react-app appname命令，从头创建一个全新的应用程序。

它创建了一个新的应用程序和所有需要的文件

A:\work>npx create-react-app react-style-components
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support the global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

现在，运行下面的命令来启动React应用程序

它用http://localhost:3000/ 开始反应应用程序。

让我们在反应组件中添加一个按钮组件

在React组件的渲染方法中添加Html按钮代码。

import React from "react";

class ButtonStyle extends React.Component {
    constructor() {
        super()
    }
    render() {
        return <div>
            <button type="button">Click</button>
        </div>

    }
}
export default ButtonStyle;

让我们看看给按钮添加样式的不同方法

如何在React组件中添加内联样式？

内联样式是在HTML中添加到元素本身。

这是一种简单而快速的添加到元素的方法。

React为一个元素提供了一个style 标签，该标签接收一个用{{}}包装的对象。一个对象是一个包含键和值的javascript，键必须是一个字符串，值必须用双引号括起来，为一个字符串。

与CSS样式相比，在一个单独的文件中选择样式总是非常优先的。

import React from "react";

class ButtonInlineStyle extends React.Component {
    constructor() {
        super()
    }
    render() {
        return <div>
            <button
                style={{
                    fontSize: "1rem",
                    fontWeight: 1.5,
                    lineHeight: 1.5,
                    color: "white",
                    borderRadius: "25px",
                    backgroundColor: "blue",
                    padding: "0 2em",
                    outline: "none",
                    border: "none"
                }} type="button">Click</button>
        </div >

    }
}
export default ButtonInlineStyle;

它很简单，很容易测试变化，但也有一些缺点

  • 这是一个快速应用于小项目代码库的方法，不适合于大项目。
  • 需要复杂的逻辑，需要实现hover 和伪CSS代码样式
  • 与组件逻辑紧密耦合的CSS样式。
  • 编写标准的内联CSS属性非常困难，例如，CSS采取border-radius ，React内联样式接受了borderRadius

输出：

它显示了一个带有应用CSS样式的按钮。

如果你检查一个按钮，你可以看到带有内联样式属性的html按钮。

<button type="button" style="font-size: 1rem; font-weight: 1.5; line-height: 1.5; color: white; border-radius: 25px; background-color: blue; padding: 0px 2em; outline: none; border: none;">Click </button>

在React组件中导入CSS样式文件

在一个单独的文件中编写CSS样式，并在react组件中导入CSS文件，这是一个标准的方法

创建一个样式表文件style.css

.clickButton{
    font-size: 1rem; 
    font-weight: 1.5; 
    line-height: 1.5; 
    color: white; 
    border-radius: 25px; 
    background-color: blue; 
    padding: 0px 2em; 
    outline: none;
     border: none;
}
.clickButton:hover{
    color: white; 
    background-color: lightblue; 
}

在React组件中，你可以使用className 、元素或id来应用样式。

className in react属性等于HTML中的class 属性。

接下来，用正确的路径导入style.css:

import React from "react";
import "./styles.css"
class ButtonStyle extends React.Component {
    constructor() {
        super()
    }
    render() {
        return <div>
            <button className="clickButton"
                type="button">Click</button>
        </div >

    }
}
export default ButtonStyle;

生成的HTML输出:

<button class="clickButton" type="button">Click</button>

优点:

  • 样式和组件逻辑的清晰分离
  • 支持本地的CSS样式
  • 支持CSS伪装和悬停，选择器。
  • 它为添加最新的预处理程序支持提供了更多的权力

劣势:

  • 命名CSS选择器的React命名规则
  • 使用普通的CSS文件很容易，对于sass、less和stylus预处理器，需要进行大量的设置才能将它们编译成CSS代码。
  • CSS样式被应用于组件的全局范围，组件层次结构中的任何子代都需要适当的深度嵌套CSS层次结构来应用组件的局部范围。
  • 命名规则必须与CSS名称和DOM元素名称相匹配

如何在javascript中为react组件编写css样式

通过这种方式，你可以在javascript文件中定义CSS样式。

styled-components库提供了一种将CSS集成到react组件的javascript中的简单方法。 它是一个npm库，可以用CSS和ES6 javascript来管理样式。

首先，通过以下步骤在react应用程序中安装styled-components

如果你使用的是npm包管理器，运行下面的命令

npm install --save styled-components

在yarn包管理器中输入以下命令

yarn add styled-components

让我们使用风格化组件创建一个按钮

创建了两个按钮，每个按钮都是用styled-components语法设计的，它将CSS样式包装在javascript模板中。

import React from "react";
import "./styles.css"
import styled from "styled-components";

class ButtonStyledComponent extends React.Component {

  render() {
    return <div>
      <Button type="button">Click</Button>
      <Button1 className="submitButton" type="button">Click</Button1>

    </div >

  }
}
export default ButtonStyledComponent;


const Button = styled.button`
font-size: 1rem; 
font-weight: 1.5; 
line-height: 1.5; 
color: white; 
border-radius: 25px; 
background-color: blue; 
padding: 0px 2em; 
outline: none;
 border: none;

  &:hover {
    color: white; 
    background-color: red; 
  }
`;

const Button1 = styled.submitButton`
font-size: 1rem; 
font-weight: 1.5; 
line-height: 1.5; 
color: white; 
border-radius: 25px; 
background-color: green; 
padding: 0px 2em; 
outline: none;
 border: none;

  &:hover {
    color: white; 
    background-color: yellow; 
  }
`;

优点是:

  • CSS样式只应用于有限的组件，并且不与页面中的组件层次相冲突。
  • 你可以在不同的文件中分离UI样式和组件逻辑

劣势:

  • 需要学习风格化组件的语法并添加代码
  • 需要学习模板字面的包装CSS样式的方法
  • 额外的npm依赖性styled-component。

剩下的方法是用以下预处理程序应用样式

  • SASS和SCSS预处理器
  • LESS CSS
  • Stylus CSS语言 为此，React应用创建应加入支持和编译这些语言并输出CSS。

结语

综上所述，有多种方法可以将CSS样式添加到React组件中，并举例说明。

avatar
文章
阅读
粉丝