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 库，例如emotion或styled-components

如何仅将CSS应用于React子组件

1 个答案: