web-dev-qa-db-fra.com

Material-UI next - Mise en forme du texte dans ListItemText

j'essaye d'appliquer le style au texte à l'intérieur d'un ListItemText (Material-UI @next):

const text = {
  color: 'red'
}

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

Mais le rendu <Typograhy> l'élément à l'intérieur n'est pas du tout stylisé ("MyText" n'est pas rouge).

En regardant le code généré, il semble que les règles CSS par défaut pour Typography> subheading remplacent mon CSS.

Merci de votre aide

edit: Dans la première version de la question, il y avait une erreur ("className" au lieu de "style" prop sur ListItemText, désolé).

reactjsmaterial-ui
18
Julien Tanay

Je crois que la seule façon d'y parvenir en ce moment est d'utiliser l'accessoire 'disableTypography' de l'élément ListItemText.

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

Cela vous permet d'incorporer votre propre élément de texte avec le style que vous souhaitez.

24
Sundaram Ravi

Il s'avère qu'il existe un meilleur moyen de le faire en tant que tel:

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

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

export default withStyles(styles)(DashboardNagivationItems)

Vous pouvez en savoir plus sur la façon dont cela est fait ici: https://material-ui-next.com/customization/overrides/#overriding-with-classes

8
Andre Romano
            <ListItem >
                    <Avatar style={{ backgroundColor: "#ff6f00" }}>
                      <LabIcon />
                    </Avatar>
                    <ListItemText 
                     primary={<Typography variant="h6" style={{ color: '#ff6f00' }}>Lab</Typography>}
                     secondary="Experiments" />
                  </ListItem>

enter image description here

8
Hitesh Sahu

this est bon, vous pouvez implémenter sans désactiver la typographie

<ListItemText 
   classes={{ primary: this.props.classes.whiteColor }}
   primary="MyTitle"
/>
4
Sachin srinivasan

Matériel v1.0

J'ajouterais quelque chose à @SundaramRavi en ce qui concerne:

  • la façon dont il utilise l'élément de style qui n'est pas très bon comme pour Material v1.0 (lisez la différence très importante entre v0.16 + et v1. .
  • la façon dont les fichiers peuvent être structurés pour une meilleure séparation des préoccupations.

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);
3
Mick

Par documentation , le <ListItemText /> le composant expose le prop primaryTypographyProps, que nous pouvons utiliser pour accomplir ce que vous essayez dans votre question:

const text = {
    color: "red"
};

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

J'espère que ça t'as aidé!

1
josephemswiler

Si vous utilisez material-ui 3.x, voici comment procéder:

import { withStyles } from '@material-ui/core/styles';

const styles = {
  listItemText: {
    color: 'white',
  },
}

class YourComponent extends Component {
...
render() {
    const { classes } = this.props; // this is magically provided by withStyles HOC.
    return (
          <ListItem button>
            <ListItemIcon>
              <DashboardIcon />
            </ListItemIcon>
            <ListItemText classes={{ primary: classes.listItemText }} primary="My Bookings" />
          </ListItem>
    );
...

}
export default withStyles(styles)(YourComponent);

définissez tous vos styles liés au texte sur la propriété primary. Dommage qu'il soit caché si profondément dans la documentation. https://material-ui.com/api/list-item/

1
saran3h