React 内联样式答案

【问题标题】：Inline styling with ReactReact 内联样式
【发布时间】：2017-06-15 16:17:24
【问题描述】：

我想在 React js 文件中包含以下样式以在标签后添加星号。

.required:after {
color: #e32;
content: ' *'; }

我尝试了下面的代码，但它在标签前给了我星号

const styles = {
    required:
        {
    after:
        {
    content: "*",
    color: "red"
        }
        }};

【问题讨论】：

您可能会发现阅读this 很有帮助。
CSS pseudo elements in React的可能重复

标签： css reactjs

【解决方案1】：

我认为这是不可能的。 React 中还没有一些内联样式结构。我将尝试检查文档并为您提供链接。

为什么不在 JSX 中使用 className 并引用 CSS 文件来获取该类名？

更新：

在 React 中，内联样式被指定为对象——你就是这么做的。您注意到驼峰式键样式名称和值通常是字符串：

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

React.render(<div style={divStyle}>Hello World!</div>, mountNode);

ms 以外的供应商前缀应以大写字母开头。这就是为什么 WebkitFilter 有一个大写的“W”。

例如，这会起作用：

return (
        <div>
          <span>Something</span>
          <div style={{position: 'absolute', WebkitFilter: 'blur(10px) saturate(2)'}} />
        </div>
    );

但是，正如 here 所解释的那样，使用 :after 将不起作用。

这是使用 CSS 的示例：

class Example extends React.Component {

  render() {
    return ( <div className = "required">Test</div> );
  }
}

ReactDOM.render( < Example / > , document.getElementById('root'));

.required:after {
color: #e32;
content: ' *'; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：

谢谢，我可以试试:)
@mayuri 如果这对您有帮助，请考虑点击大绿色✔。

【解决方案2】：

内联样式不能用于定位伪类或伪元素。您需要使用样式表。

在尝试这种方法之前尝试改变你的逻辑。

您可以在此问题中查看类似的方法： CSS pseudo elements in React

【讨论】：