如何覆盖 React 组件的样式答案

【问题标题】：How to Override React Component's Styling如何覆盖 React 组件的样式
【发布时间】：2020-07-26 02:34:59
【问题描述】：

如何从全局样式中覆盖 React 子组件的样式？

我有一个在 SCSS 中自定义样式的主组件
我有一个子组件里面使用Semantic-UI-React
现在子组件无法正确显示Semantic-UI-React 所做的样式

有什么方法可以实现吗？

这里是代码：（精简版）

// MainComponent.js

import './styles'

export default class MainComponent extends Component{
 return (
  <Fragment>
   <Some_local_elements /> 
   <ChildComponent />
  </Fragment>
 )
}

// ChildComponent.js

import {Menu, Accordian, Icon} from 'semantic-ui-react'

export default class ChildComponent extends Component{
 render(){
  return (
   <Accordian>
    <Accordian.Title
    active={0}
    index={0}
    onClick={this.handleClick}
    >
     <Icon name="dropdown" />
     Experience
    </Accordian.Title>
    <Accordian.Content active={0}>
     {this.state.checkBoxData
      ? this.state.checkBoxData.map((data, index) => {
        return (
         <Menu.Item key={index}>
          <Checkbox key={data.id} label={data.name} value={data.value} />
          <br />
         </Menu.Item>
        )
       }
      ): null}
    <Accordian.Content>
   </Accordian>
  )

 }
}

【问题讨论】：

你确定你没有忘记在你的主 index.html 文件中导入语义 ui css 吗？
如果以下回答了您的问题，请给它一个绿色的勾号，并可能投赞成票！！！

标签： javascript reactjs sass semantic-ui

【解决方案1】：

使用：

style={{<html DOM attributes with camelcase>}}

在你想要赋予内联样式的元素内。

或者像这样：

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};
function exmaple() {
  return <div style={divStyle}>element</div>;

【讨论】：