等效于反应样式中的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

回答

相关问题