如何在反应中添加作用域 css?

有没有像 Vue 中那样的 React 等效于scoped css并且非常易于使用，无需大量重写？一个我可以导入现有的css文件，并将其连接到一个组件，它就可以工作了？

在 Vue 中，它就像

<style scoped src="./boxes.css"></style>

砰！您的 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>
}
}

这里的每个答案都是关于 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] {}

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

按钮模块.css

.error {
background-color: red;
}

另一个样式表.css

.error {
color: red;
}

按钮.js

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet
class Button extends Component {
render() {
// reference as a js object
return <button className={styles.error}>Error Button</button>;
}
}

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

<!-- This button has red background but not red text -->
<button class="Button_error_ax7yz">Error Button</button>

在 React 中没有这样的东西。 3 种常见的样式设置方法：

导入一个 css 文件，然后像普通 HTML 一样使用className=> 什么都不需要学习，只需添加一个import就可以了。
Css-in-js 库。我更喜欢styled-component- 它很棒。
内联样式

据我所知，没有办法完全按照 Vue 的方式做到这一点，但是有很多库可以做这种事情，这给了你很多选择，无论你喜欢什么工作。我个人的建议是情感。

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

它将通过在 css 类的名称中添加唯一的哈希来限定您的 css 范围。

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

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 React.Component {
render <div>
<ComponentA />
<ComponentB />
</div>
}

您的 HTML 文件将产生

<!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>

对于任何偶然发现这个的人...

来自 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;

相关内容

最新更新

热门标签：