Question

是否存在与Vue中的scoped css等效的 超级简单，而没有一堆重写？我可以导入一个现有的css文件，并将其连接到一个组件，它只是工作吗？

在Vue 中，它就像
一样简单
<style scoped src="./boxes.css"></style>

和Bam！您的css现在作用于您的组件。

React 中有类似内容吗？就像是

// import the css file import styles from "./boxes.css"; // hook it to a component, or using any other methods @inject(styles) class Boxes extends Component { render(){ <div className='container'> /* must support multiple classes out-of-the-box, unlike CSSModule where you have to re-write into a super long array like className={[styles.box, styles.green, styles.large]} */ <div className='box green large'></div> <div className='box red small'></div> </div> } }

Answer 1

据我所知，没有办法完全像Vue那样做，但there are plenty of libraries做这种事情，这给你很多选择，无论你喜欢什么工作。我的个人建议是emotion。

Answer 2

在React中没有类似的东西。 3种常见的风格方式：

导入css文件，然后像普通HTML =＆gt;一样使用className没有必要学习，只需添加一个import，你准备好了。
Css-in-js库。我更喜欢styled-component - 这太棒了。
内联样式

Answer 3

您可以将css模块与webpack css-loader一起使用。

它将通过在css类的名称中添加唯一的哈希来限制你的css。

例如，如果ComponentA在名为stylesA.css的文件中具有样式定义，而ComponentB在名为stylesB.css的文件中具有样式定义，则为：

＆＃13;

import * as React from 'react'

const stylesA = require('./stylesA.css')
const stylesB = require('./stylesB.css')

class ComponentA extends React.Component {
  render <div className={stylesA.container}>
}

class ComponentB extends React.Component {
  render <div className={stylesB.container}>
}

class Main extends Recat.Component {
  render <div>
    <ComponentA />
    <ComponentB />
  </div>
}

＆＃13;

您的HTML文件将显示为

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
    <div id="app">
      <div class="container-[HASH FOR A]">
      </div>
      <div class="container-[DIFFERENT HASH FOR B]">
      </div>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

＆＃13;

Answer 4

https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

Button.module.css

(method = 'ffill')

another-stylesheet.css

event           user   value    offer_id                            days
offer received  A      0.00     0b1e1539f2cc45b7b9fa7c272da2e1d7    0.00
offer viewed    A      0.00     0b1e1539f2cc45b7b9fa7c272da2e1d7    0.2
transaction     A      1.09     0b1e1539f2cc45b7b9fa7c272da2e1d7    9.75                   
transaction     A      2.55     0b1e1539f2cc45b7b9fa7c272da2e1d7    11                         
offer received  A      0.00     3f207df678b143eea3cee63160fa8bed    0.00
transaction     A      3,02     None                                9.75

Button.js

.error {
  background-color: red;
}

结果：与其他.error类名称没有冲突

.error {
  color: red;
}

Answer 5

这里的每个答案都是关于CSS模块的，但是Vue中的作用域样式是另一种方式。

在这里，React的库在Vue中像<style scoped>：https://github.com/gaoxiaoliangz/react-scoped-css

输入：

import React from 'react'
import './Title.scoped.css'

const Title = props => {
  return (
    <h1 className="title">
      <p>{props.children}</p>
    </h1>
  )
}

export default Title

输出：

<h1 class="title" data-v-hi7yyhx>

.title[data-v-hi7yyhx] {}

Answer 6

对于任何偶然发现此问题的人...

来自 Vue，我也遇到了这个问题。我能够为每个组件设置灵活的范围样式结构

考虑以下内容。

const useOwnStyles = () => ({
    hero: {
        backgroundColor: "red",
        height: "300px",
    },
    // add more classes
});

const Home = () => {
    const classes = useOwnStyles();
    return (
        <div style={classes.hero}>
           <div>My Section</div>
        </div>
    );
}
 
export default Home;

如何添加scoped css in react？

6 个答案: