如何在不同维度使用 CSS（CSS-in-JS）？

今天我们将了解 CSS-in-JavaScript。 CSS 很棒并且很容易上手，但是前端应用程序一直在以巨大而复杂的速度扩展，这并不能使当前的 CSS 专为这项工作而设计。 CSS-in-JS 是一个真正的交易，并且在许多方面，当涉及到在 Web 上构建和样式化应用程序时，它是当今最好的。

什么是 CSS-in-JS：顾名思义，CSS-in-Javascript。它仍然是 CSS，但它利用了 JavaScript 功能。它使用 JavaScript 作为一种语言，以声明性和可维护的方式描述样式。

CSS-in-JS 的好处：

1. 它会抛出错误以帮助您避免错误，包括语法、类型和未定义的错误。
2. 它使死代码更易于管理。
3. 它可以帮助您利用 JavaScript 生态系统中的任何东西。
4. 您不必维护多个 CSS 文件。
5. 许多 CSS-in-JS 库无需额外设置即可提供关键 CSS 等性能改进。

何时使用 CSS-in-JS：只想在没有动态前端的情况下创建网站的初学者可能会发现标准 CSS 是样式的最佳选择。但是对于从事大量组件的 javascript 项目的开发人员来说，CSS-in-JS 是您的最佳选择。

在 JS 中实现 CSS：我们不能在没有 CSS-in-JS 库的情况下使用 CSS-in-JS。有很多 CSS-in-JS 库让我们通过示例来看看如何在这些库的帮助下在 JS 中使用 CSS。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app 

第 2 步：现在，通过在命令提示符终端中编写以下命令导航到“表单”文件夹。

cd foldername

项目结构：它将如下所示。

第 3 步：键入以下命令在浏览器 localhost 上运行您的项目：3000

npm start

1. 样式化组件：它是 Github 上最流行的 CSS-in-JS 库之一。它在 GitHub 上有 23K+ 颗星。使用 styled-components，您可以创建一个带有样式的普通 React 组件。 Styled-component 有很棒的特性，比如没有类名错误，无痛维护。下面介绍了如何使用样式组件的步骤：

第 1 步：在终端中使用以下命令安装所需的库：

// with npm
npm install styled-components

or
// with yarn
yarn add styled-components

第2步：现在安装完成。在 App.js 文件中写下以下代码。这是一个如何使用 CSS-in JS 库styled-component设置样式的示例。在这个文件中，我们将首先通过导入样式组件来快速设置我们的 javascript 样式，然后开始设置样式。

App.js

import React from 'react';
import styled from 'styled-components;
  
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: hotpink;
`;
  
// The Title component will render
// an 
 tag with some styles
  
const Wrapper = styled.div`
  padding: 4em;
  background: rebeccapurple;
`;
// The Wrapper component will render
// a 
 tag with some styles
  
const Paragraph =styled.p`
color: white;
  
// When styling classes you simply use
// an ampersand and you style your class
// just like you did with traditional CSS
  
& .text{
text-align: left;
  
}
&:hover{
  color:pink;
}`
  
// The paragraph component will render a 
// 
 tag with some styles
  
const App = () =>{
return(
  
    
    
        This is paragraph
    
  
);
}
  
// Use Title and Wrapper like any other
// React component – except they're styled!

第三步：在终端运行下面的代码

npm start
or
yarn start

输出：

2. JSS：在 GitHub 上又多了一个超过 6k 星的库。 JSS 是一种 CSS 创作工具，它允许您使用 JavaScript 以声明性、无冲突和可重用的方式描述样式。它由多个包组成：核心、插件、框架集成等。如何使用 JSS 的步骤如下：

第 1 步：在终端中使用以下命令安装所需的库：

// with  npm
npm install --save react-jss

or
// with yarn
yarn add react-jss

第 2 步：现在安装完成，在 App.js 文件中记下以下代码。这是一个如何使用 CSS-in JS 库JSS进行样式设置的示例。在这个文件中，我们将首先通过导入 JSS 来快速样式化我们的 javascript，然后开始样式化。

应用程序.js

import React from 'react';
import {createUseStyles} from 'react-jss'
  
const useStyles = createUseStyles({
 wrapper: {
  textAlign: 'center',
   width: '100%',
   padding: '50px',
   color: '#444',
 },
  
 title: {
   color: '#fd1a26',
   fontWeight: 400,
 },
});
  
const App = () => {
const classes = useStyles()
return(
 

    
Hello World
    
This is a paragraph
  
  
)
}
  
export default App;

注意：在 JSS 中，当样式化时，您使用逗号来分隔不同元素的样式和样式。

第三步：在终端运行下面的代码

npm start
or
yarn start

输出：

3. Emotion：它是一个专注于应用程序性能的 CSS-in-JS 库。它在 GitHub 上有超过 7.7K 星。除了具有源地图、标签和测试实用程序等功能的出色开发人员体验外，它还提供强大且可预测的样式组合。如何处理情绪的步骤如下：

第 1 步：在终端中使用以下命令安装所需的库：

// with npm
npm install @emotion/styled @emotion/react

or

// with yarn
yarn add @emotion/styled @emotion/react

第 2 步：现在安装完成，在 App.js 文件中记下以下代码。这是一个如何使用 CSS-in-JS 库来设置样式的示例。在这个文件中，我们将首先通过导入情感来快速设置我们的 javascript 样式，然后开始设置样式。

应用程序.js

/** @jsx jsx */
import React from 'react';
import { jsx, css } from '@emotion/react';
import styled from '@emotion/styled';
  
  
const Wrapper = css`
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 padding: 40px;
 color: #444;
 border: 1px solid #4800f4;
`;
  
const Title = styled.h1`
 color: #0d1a26;
 font-weight: 400;
`;
  
const Button = styled('button')`
 padding: 8px 15px;
 border: none;
 border-radius: 5px;
 background-color: #4800f4;
 color: #fff;
 font-size: 14px;
 cursor: pointer;
  
 &:hover {
 transition: .5s;  
 padding: 10px 20px;
 }
`;
  
const App = () => {
return(
 

 
 This is a button

)
};

第三步：在终端运行下面的代码

npm start
or
yarn start

Emotion 与 styled-components 有类似的语法。

注意：如果您不在文件行的顶部包含此注释，则情感将不会运行：

/** @jsx jsx */

输出：

4. Aphrodite：它是另一个 CSS-in-JS，在 Github 上拥有超过 5.2k 颗星。 Aphrodite 是一个与框架无关的 CSS-in-JS，支持服务器端渲染、浏览器前缀和最小 CSS 生成。无论有没有反应，这个库都很棒。如何使用阿芙罗狄蒂的步骤如下

第 1 步：在终端中使用以下命令安装所需的库：

// with npm
npm install aphrodite

第 2 步：现在安装完成，在 App.js 文件中记下以下代码。这是一个如何使用 CSS-in-Js 库aphrodite进行样式设置的示例。在这个文件中，我们将首先使用aphrodite通过导入它来快速样式化我们的 javascript，然后开始样式化。

应用程序.js

import React, { Component } from 'react';
import { StyleSheet, css } from 'aphrodite';
   
const styles = StyleSheet.create({
  container: {
  width: '70%',
  padding: '20px',
  border: '1px solid #000',
},
red: {
  backgroundColor: 'red'
},
   
blue: {
  backgroundColor: 'yellow'
},
   
hover: {
  background:'rebeccapurple',
    ':hover': {
      backgroundColor: 'hotpink'
    }
  },
   
  small: {
    ':hover': {
      backgroundColor: 'royalBlue',
    },
  }
});
   
class App extends Component {
  render() {
    return (
      

        

          This paragraph is purple.
        
   
        

          This paragraph is indigo and 
          turns purple on hover.
        
   
        

          This turns blue when the browser 
          is less than 600px width.
        
   
        

          This is yellow.
        
   
        

          This paragraph is white, turns blue 
          when the browser is less than 600px width.
        
      
    }
  }
}

第三步：在终端运行下面的代码

npm start
or
yarn start

输出：