等效於反應樣式中的ulli

我正在嘗試使padding元素等於0，而不使用styles=newListStyle。我想使用相同的語法在css ul li，使我的li元素沒有填充。當前代碼：等效於反應樣式中的ulli

listOne: { 
    width: '50%', 
    float: 'left', 
    fontSize: '30px', 
    color: theme.colour.lightGrey, 
    marginTop: '0', 
    fontStyle: 'normal', 
    fontStretch: 'normal', 
    textAlign: 'left' 
    },

來源

2016-11-28 DaveDavidson

添加班級？... –

我說我不想這樣做，如果可能的話。我想從'listOne'中選擇li元素。 – DaveDavidson

內聯樣式適用於單個元素（儘管一些規則級聯）。您還需要向'li'元素添加另一組內聯樣式。 –

您將需要使用這個CSS模塊，並將它們導入到你的反應成分是這樣的：

import React from 'react'; 
import styles from './styles.css'; 

class Thing extends React.Component { 
    render() { 
    return (
     <ul className={styles.list}> 
     <li>item</li> 
     <li>item</li> 
     </ul> 
    ); 
    } 
}

然後，在你的styles.css文件，你可以做這樣的事情：

ul.list { 
    /* styles */ 
} 

ul.list li { 
    /* styles */ 
}

如果使用內嵌樣式像上面一樣，那麼你就別無選擇，只能單獨樣式每個元素，你會消除在CSS使用「級聯」的可能性。

來源

2016-11-28 12:29:49

我很確定他問他如何使用內聯樣式來做到這一點...... –

他沒有明確提到這一點。 –

>在CSS中相同的語法 –

沒有嵌入式樣式選擇器的概念。樣式只能應用於單個元素。

let listStyles = { ... }; 
let itemStyles = { padding: 0 }; 

<ul styles={listStyles}> 
    <li styles={itemStyles} /> 
</ul>

有些規則會被孩子們繼承，例如顏色和字體，但是像填充這樣的規則必須明確指定。

來源

2016-11-28 12:35:43

等效於反應樣式中的ulli

回答

相關問題