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

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

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

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

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

【问题讨论】:

标签: 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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-07-19
    • 2014-05-29
    • 2017-01-13
    • 2017-09-27
    • 2021-09-10
    • 2019-02-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多