Как переопределить стиль компонента React - PullRequest
Новая
       14

Как переопределить стиль компонента React

1 голос
/ 13 апреля 2020

Как я могу переопределить стили дочернего компонента React из глобального стиля?

  • У меня есть основной компонент, индивидуально стилизованный в S CSS
  • И у меня есть дочерний компонент внутри который использует 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>
  )

 }
}

1 Ответ

0 голосов
/ 13 апреля 2020

use: 

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

внутри элемента, который вы хотите придать встроенному стилю.

или как это: 

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