reactjs 如何在react中将一个文件css与另一个文件的css隔离

aamkag61  于 2022-12-03  发布在  React
关注(0)|答案(1)|浏览(275)

我们目前正在进行一个项目,项目结构演示:

每当我在单独的项目中使用pdf.js和pdf.css时,它都能完美地工作。但是当我把pdf.js和css放在这个项目中时,项目的css会覆盖pdf.css
是否有任何方法来使用单独的css文件每个组件?我已经尝试做modules.css,但我不得不改变现有的所有css,请提供一些建议

jogvjijk

jogvjijk1#

下面是React文档的一个参考。
然后你可以这样使用,如React上的例子所示:
基于类的组件

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>;
  }
}

功能基础组件

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet

const Button = () => {
  return <button className={styles.error}>Error Button</button>
}

相关问题