Question

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

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

我尝试了下面的代码，但它在标签

之前给了我星号

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

Answer 1

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

尝试在尝试此方法之前更改逻辑。

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

Answer 2

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

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

更新：

在React中，内联样式被指定为对象 - 您这样做了。您注意到camelCased键样式名称和值通常是字符串：

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有一个大写＆＃34; W＆＃34;。

例如，这可行：

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

然而，正如使用:after所解释here所做的那样。

以下是usig CSS示例：

＆＃13;

class Example extends React.Component {

  render() {
    return ( <div className = "required">Test</div> );
  }
}

ReactDOM.render( < Example / > , document.getElementById('root'));

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用React进行内联样式设计

2 个答案: