material-ui BottomNavigation 不填宽答案

【问题标题】：material-ui BottomNavigation does not fill the widthmaterial-ui BottomNavigation 不填宽
【发布时间】：2020-10-14 10:58:39
【问题描述】：

我正在使用材质 ui 中的 BottomNavigation，它有 5 个项目。我假设这 5 个项目总是会显示，而与手机/平板电脑的实际宽度无关。但是，当使用 chrome 在各种手机配置中进行测试时，我发现情况并非如此。例如看下图：

我的代码是：

import React from 'react';
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';


import { makeStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import ExploreOutlinedIcon from '@material-ui/icons/ExploreOutlined';
import RadioOutlinedIcon from '@material-ui/icons/RadioOutlined';
import PersonOutlineIcon from '@material-ui/icons/PersonOutline';
import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
import MoreHorizOutlinedIcon from '@material-ui/icons/MoreHorizOutlined';
import NavigatorPane from './Components/NavigatorPane';



const useStyles = makeStyles({
    root: {
        width: '100%',
        position: 'fixed',
        bottom: 0,
    },
});



const App = () => {
    const classes = useStyles();
    const [value, setValue] = React.useState(0);

    return (
        <div>
            <BrowserRouter>
                <NavigatorPane></NavigatorPane>
                <BottomNavigation
                    value={value}
                    onChange={(event, newValue) => {
                        setValue(newValue);
                    }}
                    className={classes.root}
                >
                    <BottomNavigationAction component={Link} to="/explorer" label="Explore" icon={<ExploreOutlinedIcon />} />
                    <BottomNavigationAction component={Link} to="/radio" label="Radio" icon={<RadioOutlinedIcon />} />
                    <BottomNavigationAction component={Link} to="/mymusic" label="My Music" icon={<PersonOutlineIcon />} />
                    <BottomNavigationAction component={Link} to="/search" label="Search" icon={<SearchOutlinedIcon />} />
                    <BottomNavigationAction component={Link} to="/more" label="More" icon={<MoreHorizOutlinedIcon />} />

                </BottomNavigation>
            </BrowserRouter>
        </div>
    );
}

export default App;

我是 PWA/React/CSS 的新手，非常感谢任何指针。

【问题讨论】：

标签： reactjs material-ui progressive-web-apps

【解决方案1】：

这里的问题是 BottomNavigationAction 组件设置为占用 80px 最小宽度 - 这就是它们在较小屏幕中溢出的原因

我建议你使用媒体查询来控制它

const useStyles = makeStyles({
  root: {
    width: "100%",
    position: "fixed",
    bottom: 0,
    "& .MuiBottomNavigationAction-root": {
      "@media (max-width: 768px)": {
        minWidth: "auto",
        padding: "6px 0"
      }
    }
  }
});

【讨论】：

【解决方案2】：

我正在使用相同的组件并遇到相同的问题，我通过将此样式应用于根来解决它，如下所示

 root: {
    position: "fixed",
    bottom: "0px",
    left: "0px",
    right: "0px",
    width: "100%",
    height: "60px",
    backgroundColor: "#24242D"
  }

https://codesandbox.io/s/9xdc0?file=/demo.js

【讨论】：