ReactJS 中的相同文件样式（类似于 VueJS）

Posted 2023-03-15

【中文标题】ReactJS 中的相同文件样式（类似于 VueJS）

【英文标题】：Same File Styles in ReactJS (similar to VueJS)

【发布时间】：2021-06-19 10:41:37

【问题描述】：

在 VueJS 中，您有一个 style 部分，您可以在其中添加自定义 css。使用 React，您可以使用 StyledComponents 创建具有 css 功能的组件（并在同一个文件中执行此操作）。或者，在 react 中，您可以导入外部样式表并使用这些样式。

我想知道是否有一种方法可以在 ReactJS 文件中创建类似 Vue 的功能——也就是说，类似于 react/jsx 文件中的 css file？

例如，这是我不想要的：

Const Input = styled.input``
const Button = styled.button``
Const PostList = styled.div``
// etc

相反，我想要这样的东西：

const Styles = `

 input  // add input styles here 
 .button  // add button styles 
 .post-list  // add post-list styles here 
 // etc

`

我并不是说它必须是上面的确切语法，而是在一个变量（或函数或对象）中，我可以使用 normla css 语法创建与该文件相关的所有 css 样式？这和样式化组件之间的区别在于样式化组件a）我不创建类名，b）我必须每次都创建一个新组件。

我实际上想创建类名，而不是组件——我想一次性完成（就像普通的 css 文件一样，就在 react.js(x) 文件中）。

简而言之，这样的事情在 React 中是否可行——如果可以，如何实现？

谢谢。

【问题讨论】：

这是绝对可行的，这种模式被称为 CSS-in-JS。看看Material-UI's implementation of styling 和这里的a good article，展示了 React 中最不同的样式。这些可能不是您需要的确切实现，但希望能让您了解如何为您的用例实现它

你可以考虑看看 CSS 模块，看起来更适合你

【参考方案1】：

您可以使用 styled-components 来实现。另外，您可以使用道具 Here is the link

【参考方案2】：

您可以创建一个 css 文件并将其导入到您需要的任何位置。例如。如果您想创建一些常见的 css 类并在整个应用程序中使用它。然后创建一个普通的 css 文件并编写你的 css 规则。

然后将该 css 文件导入您的主/根组件中。

例如。如果你的css文件名是helper.css

你的根组件是App.js

然后像这样导入

import React from "react";
import "./helper.css";

function App()
  return "root component"

在 react 中没有特殊的方法来编写/创建 css 文件。在简单的 html/css 项目中，您可以按照自己的方式进行操作