反応スタイリングのul liに相当します

Question

styles=newListStyleを使わずに私の<li>要素にあるpaddingを0にしようとしています。 のCSSで同じ構文を使用して、li要素にパディングがないようにしたいと考えています。現在のコード：

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

Answer 1

あなたはこのようにコンポーネントを反応させ、このための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で「カスケード」を使用しての可能性を排除します。

Answer 2

インラインスタイルのセレクタの概念はありません。スタイルは単一の要素にしか適用できません。

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

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

色やフォントなどの子に継承されるルールがいくつかありますが、パディングのようなルールは明示的に指定する必要があります。