版式中的嵌套样式

Question

如何使用<Typography />设置文本样式？是否可以做这样的事情：

const someText = 'Hello <b>World</b>';
...
<Typography>
{someText}
</Typography>
...

还是我需要拆分我的文本？对于嵌套排版，我似乎有一些布局问题。

Answer 1

我正在使用material-ui 4.*，这样做是完全合法的。

<Typography variant={'h5'} >Treffen Sie auf der it-sa 2019 die Micro Focus 
<Typography display={'inline'} >und diskutieren Sie über </Typography>
</Typography>

Answer 2

我终于使用了这样的自定义样式：

const styleSheet = createStyleSheet('SomeComponent', (theme) => ({
root: {
},
...
body2Bold: {
fontFamily: theme.typography.body2.fontFamily,
fontSize: theme.typography.body2.fontSize,
fontWeight: 'bold',
},
}));

然后在我的渲染函数中：

const { Hello, World, classes } = this.props;
...
<Typography type="body2" color="default">
{Hello}
<span className={classes.body2Bold}>
&nbsp;{World}
</span>.
</Typography>
...

缺点是我需要将一些文本分解为不同的变量。

Answer 3

您可以使用 Box 组件

它接受属性fontWeight，display如下所示：

<Typography component="div">
This is normal text <Box display="inline" fontWeight="fontWeightBold">this is bold</Box>
</Typography>

注意：请确保将component="div"添加到Typography否则会收到以下错误：

<div>不能显示为<p>的后代

这是一个代码沙箱

Answer 4

在Typography中使用基本html

<Typography>
Hello <b>World</b>
</Typography>

或

<Typography>
Hello <span style={{ font-weight: 'bold' }}>World</span>
</Typography>