Как применить стиль css на компоненте реакции

Question

Недавно я познакомился с реакцией и попробовал с ним. В репозиториях npm есть множество компонентов, которые я могу загрузить и использовать. Тем не менее, я не нашел хороший способ добавить css в элементы внутри компонента. Как и один ответ-вкладки: https://github.com/reactjs/react-tabs. Я могу использовать его на своей веб-странице, но как я могу добавить стиль CSS на вкладках?

Answer 1

использовать имя класса или инлайн-стиль, как

<div className='xxx'></div> 

или

<div style={{color: 'black'}}></div> 

Answer 2

Если посмотреть на react-tabs исходный код, вы увидите, что Tab компонент принимает className как опору, так что вы могли бы передайте собственное имя класса для элемента HTML табуляции. Но разработчики всегда обязаны внедрять логику свойств для своих компонентов className и style.

Answer 3

На этот вопрос нет общего ответа, кроме того, что вы создаете компонент так же, как и стиль любого элемента HTML: например, с помощью class или ids. Это означает, что это зависит от того, как реализован компонент, и потребует минимального знания дерева DOM HTML, которое будет создано вашим компонентом.

В предоставленной библиотеке вы можете предоставить свою вкладку свойство className (className in React определить свойство class созданного узла). В результате вы можете написать <Tab className="my-class" /> и использовать .my-class для создания вашего компонента.

Answer 4

Вы можете применить несколько стилей CSS к компоненту React. Смотрите ниже кучу кода:

var MultipleCss = React.createClass({ 
    getInitialState: function(){ 
    return { 
     score: 20 
    } 
    }, 
render: function() { 

    const starrate = { 
    star:{ 
     clear: 'none', 
     float: 'left', 
     margin: '0px 4px 0px 0px', 
     display: 'block', 
     width: '15px', 
     height: '15px', 
     minWidth: '15px', 
     padding: '0px', 
     cursor: 'pointer', 
     background: 'url(' + 'sprite.png' + ') no-repeat' 
    }, 
    position:{ 
     backgroundPosition: '-257px -147px' 
    }, 
    active: { 
     backgroundPosition: '-235px -147px' 
    } 
    }; 
    return (
    < div> 
     <label style={Object.assign({}, starrate.star, starrate.position)}> </label> 
    </div> 
); 
} 

});

Предположим, я хочу добавить css (active) на ярлык на основе условия. Таким образом, мы можем сделать так, как показано ниже:

<label style={Object.assign({}, starrate.star, starrate.position, this.state.score >=20 && starrate.active)}> </label> 

Такой активный класс будет применяться на этикетке всякий раз, когда state.score> = 20.