MUI - ListItemText 内的样式文本
Posted
技术标签:
【中文标题】MUI - ListItemText 内的样式文本【英文标题】：MUI - Styling text inside ListItemText 【发布时间】：2017-10-14 00:33:07 【问题描述】：我正在尝试将样式应用于 ListItemText (MUI) 中的文本：
const text =
color: 'red'
<ListItem button><ListItemText style=text primary="MyText" /></ListItem>
但是内部渲染的Typograhy元素根本没有样式（“MyText”不是红色的）。
查看生成的代码，Typography > 子标题的默认 CSS 规则似乎覆盖了我的 CSS。
感谢您的帮助
编辑：在问题的第一个版本中，有一个错误（ListItemText 上的“className”而不是“style”道具，对此感到抱歉）。
【问题讨论】：
是ListItemText，自定义组件 不，它是一个 Material-UI 组件：material-ui-1dab0.firebaseapp.com/component-api/… 【参考方案1】：我相信现在实现这一点的唯一方法是使用 ListItemText 元素的 'disableTypography' 属性。
<ListItemText
disableTypography
primary=<Typography type="body2" style= color: '#FFFFFF' >MyTitle</Typography>
/>
这让您可以使用任何您想要的样式嵌入您自己的文本元素。
【讨论】：
字体的道具类型是变体而不是类型。材料 v1.0
我想在@SundaramRavi 中添加一些关于：
他使用样式元素的方式不如 Material v1.0（阅读 v0.16+ 和 v1.0 之间非常重要的区别。 文件的结构方式可以更好地分离关注点。不管.styles.js
const styles = theme => (
white:
color: theme.palette.common.white
);
exports.styles = styles;
不管什么.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】：原来有一种更好的方法可以做到这一点：
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
【讨论】：
你应该写<ListItemText classes= primary: props.classes.selected primary="Scheduled Calls" />。有根 inset dense primary secondary textDense 类要覆盖。见material-ui-next.com/api/list-item-text
如果 text 以前是有效目标，那么现在不是。【参考方案4】：
this 很好，你可以在不禁用排版的情况下实现
<ListItemText
classes= primary: this.props.classes.whiteColor
primary="MyTitle"
/>
【讨论】：
【参考方案5】： <ListItem >
<Avatar style= backgroundColor: "#ff6f00" >
<LabIcon />
</Avatar>
<ListItemText
primary=<Typography variant="h6" style= color: '#ff6f00' >Lab</Typography>
secondary="Experiments" />
</ListItem>
【讨论】：
很有用，如果你必须通过动态内联样式。【参考方案6】：如果你使用的是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/
【讨论】：
【参考方案7】：根据documentation，<ListItemText /> 组件公开了 primaryTypographyProps 属性，我们可以使用它来完成您在问题中尝试的内容：
const text =
color: "red"
;
<ListItem button>
<ListItemText primaryTypographyProps= style: text primary="MyText" />
</ListItem>
希望有帮助！
【讨论】：
这是最好的答案，无需重写组件。【参考方案8】：您可以使用& span轻松设置文本样式
const useStyles = makeStyles(theme => (
listItem:
"& span":
color: "red"
));
..
..
..
<ListItem button>
<ListItemIcon>
<SendIcon />
</ListItemIcon>
<ListItemText className=classes.listItem primary="Sent mail"/>
</ListItem>
【讨论】：
【参考方案9】：方法一
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>
/>
Offical Docs
【讨论】：
【参考方案10】：如果您使用的是 "@material-ui/core": "^4.11.4"（4.X.X 或更新版本），那么很简单：
#1st 步骤：像这样定义您的样式：
const useStyles = makeStyles((theme: Theme) =>
createStyles(
// Other Styling if you wish to use it
root:
width: '100%',
maxWidth: '36ch',
backgroundColor: theme.palette.background.paper
,
// Other Styling if you wish to use it
inline:
display: 'inline'
,
// Styling that you asked for
textColor:
color: 'red'
),
);
#2nd 步骤：定义一个常量以使用特定样式像这样：
const AlignItemsList = (props: any) =>
const classes = useStyles(); // Like this one
......
#3rd 步骤：在您的 ListItemText 组件中执行以下操作：
const AlignItemsList = (props: any) =>
const classes = useStyles();
......
<ListItemText
primary="Your Text Goes Here"
classes= primary: classes.textColor // Like this one
...
/>
;
#4th & 最后一步：只需正常导出组件，无需任何其他内容，如下所示：
export default AlignItemsList;
【讨论】：
【参考方案11】：MUI v5 更新
您可以利用Typography 中的system properties 在ListItemText 内的primary 和secondary 组件中直接添加样式道具：
<ListItemText
primary="Photos"
secondary="Jan 9, 2014"
primaryTypographyProps=
fontSize: 22,
color: 'primary.main',
secondaryTypographyProps=
fontSize: 15,
color: 'green',
/>
如果您想在多个地方重复使用ListItemText，也可以使用styled：
import MuiListItemText from '@mui/material/ListItemText';
import styled from '@mui/material/styles';
const ListItemText = styled(MuiListItemText)(
'& .MuiListItemText-primary':
color: 'orange',
,
'& .MuiListItemText-secondary':
color: 'gray',
,
);
现场演示
【讨论】：
以上是关于MUI - ListItemText 内的样式文本的主要内容，如果未能解决你的问题，请参考以下文章