Style modification of Mui bottom navigation

Problems encountered ： Want to be MUI The bottom navigation bar plus an upper border and upper and inner margins are not displayed , But other styles of operating the navigation bar will show . Last , It was found that the problem reserved for the navigation bar at the beginning was not enough . therefore , When there is no response to the modified style, we should consider whether it is blocked by other elements .
Use MUI The bottom navigation bar of wants to modify the navigation top split line .

.mui-bar-tab {
	background-color: #fff;
	height: 49px;
	box-shadow: 0px 0px 8px 0px rgba(102,102,102, 0.6);
	padding-top: 5px;
}

When adding sub pages, reserve space for the bottom navigation .

var firstBack = null; // Record the first click back event 
let plusReadyChildren = ['home']; // The record has plusReady Of the subpage of id. Subpage plusReady This array will be written after 
var styles = {
	top: '0px',
	bottom: '50px',
	scrollIndicator: 'none'
};

Above bottom The value of is 50px, So the bottom navigation bar only 50px The location of .
It is best to use lines to set the navigation bar split line , Because the shadow has an area , It's hard to reserve a place for them to show .