Material UI nächste - Styling Text innerhalb ListItemText

Question

ich versuche, auf den Text innerhalb eines ListItemText (Material-UI @next) anwenden Stil:

const text = { 
    color: 'red' 
} 

<ListItem button><ListItemText style={text} primary="MyText" /></ListItem> 

Aber das gerenderte <Typograhy> Element im Inneren ist nicht Stil bei all ("MyText" ist nicht rot).

Mit Blick auf den generierten Code, scheint es, dass die Standard-CSS-Regeln für Typografie> Zwischenüberschrift mein CSS überschreiben.

Danke für Ihre Hilfe

bearbeiten: In der ersten Version der Frage gab es eine misa („classname“ anstelle von „Stil“ prop auf ListItemText, tut mir leid, dass).

Answer 1

Ich glaube, die einzige Möglichkeit, dies jetzt zu erreichen, ist die Verwendung der Property 'disableTypography' des Elements ListItemText.

<ListItemText 
     disableTypography 
     primary={<Typography type="body2" style={{ color: '#FFFFFF' }}>MyTitle</Typography>} 
     /> 

Damit können Sie Ihr eigenes Textelement mit dem von Ihnen gewünschten Styling einbetten.

Answer 2

Werkstoff v1.0

würde ich etwas hinzufügen, in Bezug auf @SundaramRavi zu:

• die Art, wie er Stilelement verwendet, die nicht groß ist wie für Material v1.0 ist (lesen Sie die sehr wichtiger Unterschied zwischen v0.16+ und v1.0.
• die Art und Weise Dateien können für eine bessere Trennung der Sorge strukturiert werden.

---

Whatever.styles.js

const styles = theme => ({ 
    white: { 
    color: theme.palette.common.white 
    } 
}); 

exports.styles = styles; 

Whatever.js

const React = require('react'); 
const PropTypes = require('prop-types'); 
const {styles} = require('./Whatever.styles'); 

class Whatever extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    const {classes} = this.props; 
    return (
     <div> 
     <ListItemText 
      disableTypography 
      primary={ 
      <Typography type="body2" style={{body2: classes.white}}> 
       MyTitle 
      </Typography> 
      } 
     /> 
     </div> 
    ); 
    } 
} 

Whatever.propTypes = { 
    classes: PropTypes.object.isRequired, 
    theme: PropTypes.object.isRequired 
}; 

exports.Whatever = withStyles(styles, {withTheme: true})(Whatever); 

Answer 3

Stellt sich heraus, es gibt eine noch bessere Möglichkeit, dies als solcher zu tun:

const styles = { 
    selected: { 
    color: 'green', 
    background: 'red', 
    }, 
} 

const DashboardNagivationItems = props => (
    <ListItemText 
    classes={{ text: props.classes.selected }} 
    primary="Scheduled Calls" 
    /> 
) 

export default withStyles(styles)(DashboardNagivationItems) 

Sie kann mehr darüber lesen, wie das hier gemacht wird: https://material-ui-next.com/customization/overrides/#overriding-with-classes