Material-UI next - 在ListItemText中设置样式文本

Question

我正在尝试将样式应用于ListItemText(Material-UI @next)中的文本:

const text = {
  color: 'red'
}

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

但是<Typograhy>里面的渲染元素根本没有样式("MyText"不是红色).

查看生成的代码,似乎Typography> subheading的默认CSS规则覆盖了我的CSS.

谢谢你的帮助

编辑:在问题的第一个版本中,有一个错误("className"而不是ListItemText上的"style"道具,对不起).

Answer 1

我相信现在实现这一目标的唯一方法是使用ListItemText元素的'disableTypography'道具.

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

这使您可以使用自己想要的样式嵌入自己的文本元素.

Answer 2

根据文档，该<ListItemText />组件公开了 prop primaryTypographyProps，我们可以使用它来完成您在问题中尝试的操作：

const text = {
    color: "red"
};

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

希望有帮助！

Answer 3

MUI v5 更新

您可以利用系统属性Typography直接在primary和secondary内的组件中添加样式道具ListItemText：

<ListItemText
  primary="Photos"
  secondary="Jan 9, 2014"
  primaryTypographyProps={{
    fontSize: 22,
    color: 'primary.main',
  }}
  secondaryTypographyProps={{
    fontSize: 15,
    color: 'green',
  }}
/>

styled如果您想ListItemText在多个地方重复使用，也可以使用：

import MuiListItemText from '@mui/material/ListItemText';
import { styled } from '@mui/material/styles';

const ListItemText = styled(MuiListItemText)({
  '& .MuiListItemText-primary': {
    color: 'orange',
  },
  '& .MuiListItemText-secondary': {
    color: 'gray',
  },
});

现场演示

Answer 4

事实证明,有一种更好的方法可以做到这一点:

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

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

export default withStyles(styles)(DashboardNagivationItems)

您可以在此处详细了解如何完成此操作:https://material-ui-next.com/customization/overrides/#overriding-with-classes

Answer 5

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

Answer 6

这是一个很好的选择，您可以在不禁用排版的情况下实现

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

Answer 7

如果您使用的是 material-ui 3.x，则是这样完成的：

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

在primary属性上设置所有与文本相关的样式。可悲的是它隐藏在文档中如此之深。https://material-ui.com/api/list-item/

Answer 8

方法一

const textColor = {
    color: "red"
};

<ListItemText primaryTypographyProps={{ style: textColor }} primary="BlodyLogic" />

对于次要文本

const secondaryColor = {
   color: 'green'
}

<ListItemText secondaryTypographyProps={{ style: secondaryColor }} 
     secondary="If you say that you" />

方法二

<ListItemText
          primary={
            <Typography variant="caption" display="block" gutterBottom>
              caption text
            </Typography>
          }
 />

定制设计：

const useStyles = makeStyles({
      text: {
        color: 'red',
        fontSize: 49
      },
    });
        
/.....// all make classes

<ListItemText
              primary={
                <Typography className={classes.text}>
                  caption text
                </Typography>
              }
     />

官方文档

Answer 9

材质 v1.0

我想向 @SundaramRavi 添加一些关于以下方面的内容：

• 他使用样式元素的方式对于 Material v1.0 来说并不好（请阅读v0.16+和v1.0之间非常重要的区别。
• 文件的结构方式可以更好地分离关注点。

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