时间戳

首页 > 解决方案 > 无法让 material-ui 工具栏使用 variant='dense'.... 始终保持 64px 高度

javascript - 无法让 material-ui 工具栏使用 variant='dense'.... 始终保持 64px 高度

问题描述

尝试使用这个 hello world AppBar/Toolbar 来使用 variant='dense' 格式。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import { AppBar, Toolbar, Typography } from '@material-ui/core';

const app =
  <AppBar>
    <Toolbar variant='dense'>
      <Typography color='inherit'>MyApp</Typography>
    </Toolbar>
  </AppBar>;
ReactDOM.render(app, document.getElementById('root'));
registerServiceWorker();

此媒体查询永远不会触发。

@media (min-width: 0px) and (orientation: landscape)
.MuiToolbar-root-36 { min-height: 48px; }

有任何想法吗？

标签： javascriptreactjsmaterial-ui

解决方案

媒体查询完美运行，CSS 不起作用MuiToolbar-root-36是由于组件的动态className生成Toolbar。

如果您想在模块中添加自定义 CSSToolbar或Appbar使用 CSS API @material-ui/core。

推荐阅读