material-ui BottomNavigation 不填充寬度

Question

我正在使用來自 Material 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 的新手，非常感謝您的指點。

Answer 1

這里的問題是BottomNavigationAction組件被設置為占用80px最小寬度 - 這就是它們在較小的屏幕中溢出的原因

我建議您使用媒體查詢來控制它

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

Answer 2

我正在使用相同的組件並遇到相同的問題，我通過將此樣式應用於根來解決它，如下所示

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

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