Как добавить встроенный стиль в React

Question

Как добавить встроенный стиль в React. Я попробовал этот подход, но он терпит неудачу. Я не получаю разницу

<ul style = {{padding-left: '21px'}}>
<u style={{ text - underline -position: 'under' }}>

, но это работает правильно:

<ul style={{ color: '#007acc' , textDecoration: 'none' }}>

Answer 1

В Реагирует Атрибут style требует объекта JavaScript. Во втором случае вы передаете аналогично следующему - например, создание переменной, которую вы передаете style:

const stlye = { color: '#007acc', textDecoration: 'none' };

<ul style={style}>

См. Из документации атрибут * style:

Атрибут style принимает объект JavaScript со свойствами camelCased вместо строки CSS. Это согласуется со свойством DOM style JavaScript, является более эффективным и предотвращает дыры в безопасности XSS.

Так что для запрошенного вами стиля можно применить следующее: camelCased :

<ul style={ { textUnderlinePosition: 'under', paddingLeft: '21px' } }>

Надеюсь, это прояснит!

Answer 2

Ну, вот как вы добавляете стили в Javascript, помните, что то, что вы пишете для тегов html, не само по себе html, а Javascript, которое компилируется в html, так что у вас есть всегда удалять - и использовать следующую букву с заглавной буквы.