web-dev-qa-db-ja.com

反応インラインスタイルのcss擬似コード「li :: before」

React "ExplanationLists"と呼ばれるコンポーネントがあります。動的インラインスタイルをli html要素にcss疑似コードli::afterで追加したいと思います。箇条書きのグラフィックを適切に設定します。たとえば、

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>
        )
    }
}
reactjsinline-styles
6
Chun Pin Chen

いいえ、それは不可能です。 React style属性は基本的にHTML style属性を使用するため、その中にセレクターを含めることはできません。このように記述されています answer aboutインラインスタイル。

Style属性の値は、CSS宣言ブロック（区切り波括弧を除く）のコンテンツの構文と一致する必要があります。その正式な文法は、CSSコア文法の用語と規則で以下に示されています。

declaration-list
  : S* declaration? [ ';' S* declaration? ]*
  ;
3
Tr1et

これを参照してください link 。

  1. "&::before": { ...react style here }
  2. 属性content: `''`が必要です

例：


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

お役に立てれば！

1
nokieng