如何仅将css应用于响应子组件

Question

我有一个子组件需要使用spectre.css，但是当我在子组件中导入spectre.css时，父组件也会受到影响。如何使spectre.css只应用于子组件？谢谢

父组件：

class ParentComponent extends React.Component{

    render(){
        return <ChildComponent></ChildComponent>
    }
}

在儿童部分，

import from 'spectre.css'

class ChildComponent extends React.Component{
    /* ... */
}

Answer 1

很可能您的css被捆绑在一个文件中。

• 您可以将className添加到组件中，以区分它们。
• 您可以在组件中创建样式。

const styles= {
  wrapper: {
    color: red,
  },
};

class ChildComponent extends React.Component{
    /* ... */
   render() {
      return (<div style={styles.wrapper}> </div>
   }
}

• 或者您可以尝试使用css in js库，如情感或造型-部件。