Äquivalent zu ul li in reagieren Styling

Question

Ich versuche, die padding auf meinem <li> Element gleich 0 ohne styles=newListStyle zu machen. Ich möchte das Äquivalent der gleichen Syntax in css ul li verwenden, um mein li Element keine Auffüllung zu haben. Aktuelle Code:

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

Answer 1

Sie müssen CSS-Module für diese verwenden, und importieren Sie sie in Ihrer Komponente wie folgt reagieren:

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

Dann in Ihrer styles.css-Datei können Sie etwas tun :

ul.list { 
    /* styles */ 
} 

ul.list li { 
    /* styles */ 
} 

Wenn Sie Inline-Stile verwenden, wie Sie oben haben, dann haben Sie keine andere Wahl haben, aber jedes Element separat stylen, und Sie werden die Möglichkeit der Verwendung von „Kaskadierung“ in CSS zu beseitigen .

Answer 2

Es gibt kein Konzept von Selektoren mit Inline-Stilen. Stile können nur auf ein einzelnes Element angewendet werden.

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

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

Es gibt einige Regeln, die von Kindern, wie Farbe und Schriftart geerbt werden, aber Regeln wie padding müssen explizit angegeben werden.