反应内联样式中的css伪代码“li::before”答案

【问题标题】：css pseudo code "li::before" in react inline style反应内联样式中的css伪代码“li::before”
【发布时间】：2018-01-25 13:55:50
【问题描述】：

我有一个名为“ExplanationLists”的 React 组件，我想使用 css 伪代码 li::after 将动态内联样式添加到 li html 元素中，这样我可以更好地用图形设置项目符号点的样式。例如，

li::before {
    content: dynamic_content;
}

但是，我无法真正做到这一点。任何建议将不胜感激。

下面是我写的代码。

class ExplanationLists extends Component{
    populateHtml(){
        // asign lists data into variable "items"
        var items = this.props.items; 

        // loop though items and pass dynamic style into li element
        const html = items.map(function(item){
            var divStyle = {
                display: "list-item",
                listStyleImage: 
                    'url(' +  
                    '/images/icons/batchfield_fotograf_rosenheim_icon_' + 
                    item.icon +
                    '.png' +
                    ')'   
            };  

            // html templating 
            return (
                 <li style={divStyle}>
                   <h3 >{item.title}</h3>
                   <p>{item.desc}</p>
                 </li>
            );
        });

        // return html
        return html;
    }

    render(){
        return (
            <ul>
                {this.populateHtml()}
            </ul>
        )
    }
}

【问题讨论】：

你为什么不简单地在你的li元素上使用className，然后用普通的CSS来设置它？
因为是动态内容，每次都不一样。需要通过javascript设置。

标签： reactjs inline-styles

【解决方案1】：

参考这个link。

"&::before": { ...react style here }
你必须有属性content: `''`

示例：


        content: {
            display: "flex",
            margin: 10,
            "&::before": {
                content: `''`,
                position: 'absolute',
                left: '-50px',
                top: '50px',
                width: '0',
                height: '0',
                border: '50px solid transparent',
                borderTopColor: 'red',
            }
        },

希望这会有所帮助！

【讨论】：

问题没有提到glamorous库，所以你的回答是误导..
@KarolisŠarapnickis 抱歉，我没有注意到库名称，我可以通过使用 facebook create-react-app 命令创建应用程序来完成上述操作，而我记得没有任何其他相关库。跨度>

【解决方案2】：

在您的特定情况下，您可以使用data 属性。

li::before {
  content: attr(data-content);
}

render = () => <li data-content={this.props.content}>{this.props.children}</li>

【讨论】：

【解决方案3】：

不，这是不可能的。 React style 属性在底层使用 HTML style 属性，因此它内部不能有选择器。就像answer 中关于内联样式所述。

style 属性的值必须与 CSS 声明块内容的语法相匹配（不包括分隔大括号），其形式语法在 CSS 核心语法的术语和约定中给出如下：
declaration-list
  : S* declaration? [ ';' S* declaration? ]*
  ;

【讨论】：

【解决方案4】：

您可以在 react 中以编程方式更改 ::before、::after 等伪元素的值。

试试这个解决方案，https://stackoverflow.com/a/65690431/7657952

【讨论】：

【解决方案5】：

React 没有 CSS 伪元素。这个想法是用Javascript的方式解决。简单地说，在 DOM 元素之前或之后添加一个span。我觉得它很好，比 CSS 更强大。看看a-theme-react我建的例子

const beforeImg = (
    <img
        src={screenshot5}
        style={{
            width: '216px',
            marginTop: '87px',
            marginLeft: '79px',
            height: '393px'
        }}
    />
)

export const FormSection = {
    margin: '0 0 10px',
    color: '#262626',
    backgroundColor: '#fff',
    border: '1px solid #e6e6e6',
    borderRadius: '1px',
    textAlign: 'center',
    width: '350px',
    display: 'inline-block',
    verticalAlign: 'middle',
    before: {
        content: beforeImg,
        display: 'inline-block',
        width: '400px',
        height: '560px',
        verticalAlign: 'middle',
        backgroundImage: 'url(' + home_phone + ')',
        backgroundSize: '400px 560px'
    }
}

然后在render方法中寻找.before属性，用样式渲染content。

【讨论】：