Как стилизовать Реагенты для рендеринга

Question

<div> 
        <h3>{this.props.product.name}</h3> 
        <h3>{this.props.product.code}</h3> 

        {this.renderColors()} 
        <article> 
         <div dangerouslySetInnerHTML={this.createMarkup(this.props.product.description)} /> 
        </article> 
        </div> 

Это реагирует на объекты рендеринга, и я хочу стилизовать его с помощью CSS. Есть ли способ сделать это? У меня есть отдельный файл css для этого html-файла.

Answer 1

Вы можете сделать это двумя способами:

1. Используйте встроенный стиль
2. Использовать внешний CSS

Используя встроенный стиль

Инъекционное объект стиля

const style = { 
    color: "blue" 
} 

<div style={style}></div> 

Или применять его рядный непосредственно

<div style={{"color": "blue"}}></div> 

Использование внешних CSS

в вашем CSS

.blue { 
    color: blue; 
} 

#red { 
    background-color: red; 
} 

в компоненте

<div className="blue"></div> 
<div id="red"></div>