css僞代碼「li :: before」反應內聯樣式

我有一個名爲「ExplanationLists」的React組件，我想用css僞代碼li::after將動態內聯樣式添加到li html元素中，我可以將樣式與圖形更好的點點。例如，css僞代碼「li :: before」反應內聯樣式

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

來源

2017-08-17 Chun Pin Chen

你爲什麼不簡單地在你的''li'元素上使用'className'，然後用普通的CSS來設計呢？ –

不，這是不可能的。反應style屬性使用基礎HTML style屬性，所以它不能有它內部的選擇器。就像這個在answer中關於內聯風格所述。

樣式屬性的值必須的CSS聲明塊的內容（不包括劃定括號），其正式的語法在CSS核心語法術語和慣用下面給出的語法匹配：
declaration-list 
    : S* declaration? [ ';' S* declaration? ]* 
    ; 

來源

2017-08-17 08:49:10 Tr1et

React沒有CSS僞元素。這個想法是用Javascript的方式解決。簡單來說，在DOM元素之前或之後添加一個span。我覺得它非常好，比CSS更強大。看看a-theme-react我render方法外觀例如

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

內置那麼對於.before屬性，呈現content與風格。

來源

2017-12-02 09:18:33

css僞代碼「li :: before」反應內聯樣式

回答

相關問題