Question

如何使用<Typography />设置文字样式？有可能做这样的事情：

const someText = 'Hello <b>World</b>';

...
  <Typography>
   {someText}
  </Typography>
...

或者我需要拆分我的文字吗？使用嵌套的Typographies，我似乎有一些布局问题。

Answer 1

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

namespace App\Listeners;

use Illuminate\Auth\Events\Login;
use Illuminate\Http\Request;

class LogSuccessfulLogin
{
    /**
     * Create the event listener.
     *
     * @param  Request  $request
     * @return void
     */
    public function __construct(Request $request)
    {
        $this->request = $request;
    }

    /**
     * Handle the event.
     *
     * @param  Login  $event
     * @return void
     */
    public function handle(Login $event)
    {
        $user = $event->user;
        $user->last_login_at = date('Y-m-d H:i:s');
        $user->last_login_ip = $this->request->ip();
        $user->save();
    }
}

然后在我的渲染功能中：

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

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

Answer 2

使用dangerouslysetinnerhtml插入原始HTML，否则样式将无法正常工作

Answer 3

我正在使用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 4

您可以使用Box Component

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

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

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

<div>不能作为<p>的后代

这里是codesandbox

排版中的嵌套样式

4 个答案: