时间戳

首页 > 解决方案 > 如何在 React 中添加样式内联

javascript - 如何在 React 中添加样式内联

问题描述

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

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

但这运行正常：

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

标签： javascriptcssreactjs

解决方案

在React中，style属性需要一个JavaScript对象。在您的第二种情况下，您传递的类似如下 - 就像制作一个您传递给的变量style：

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

<ul style={style}>

从文档中查看style属性：

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

因此，对于您要求的样式，可以按如下方式应用camelCased：

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

我希望这能澄清！

推荐阅读