如何在 React 中添加样式内联答案

【问题标题】：How to add style inline in React如何在 React 中添加样式内联
【发布时间】：2020-04-17 15:16:53
【问题描述】：

如何在 React 中添加样式内联。我尝试了这种方法，但失败了。我没有得到区别

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

但这运行正常：

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

【问题讨论】：

【解决方案1】：

在 React 中，style 属性需要一个 JavaScript 对象。在您的第二种情况下，您通过类似以下方式传递 - 就像将您传递给 style 的变量设为：

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

<ul style={style}>

参见style 属性的文档：

style 属性接受具有驼峰式属性的 JavaScript 对象，而不是 CSS 字符串。这与 DOM 样式的 JavaScript 属性一致，效率更高，并且可以防止 XSS 安全漏洞。

所以对于您要求的样式，可以应用如下 camelCased：

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

我希望这可以澄清！

【讨论】：

【解决方案2】：

这就是您在 Javascript 中添加样式的方式，记住，您编写的 html 标签不是 html 本身，而是 Javascript 被编译为 html，因此您必须始终删除 - 并将下一个字母大写。

【讨论】：