Question

我有一个名为“InterpreLists”的React组件，我想用css伪代码li将动态内联样式添加到li::after 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>
        )
    }
}

Answer 1

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

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

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

Answer 2

不，这是不可能的。 React style属性基本上使用HTML style属性，因此它不能在其中包含选择器。如此answer中所述，内联样式。

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

Answer 3

请参阅此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',
            }
        },

希望这会有所帮助！

Answer 4

您可以通过编程方式更改诸如 ::before、::after 之类的伪元素的值。

试试这个解决方案，

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

css伪代码“li :: before”in inline style

5 个答案: