Horizontal Menu CSS Material UI ReactJS - css

Question

I am trying to do a horizontal menu with ReactJS and Material UI, but I have the following problem: My menu shows correctly, in horizontal, but it is not responsive. When I change the size of the page in the browser, my menu continues to have the same size like before. It only updates its size when I reload with F5.
import React from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import NavigationMenu from 'material-ui/svg-icons/navigation/menu';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import Paper from 'material-ui/Paper';
import Menu from 'material-ui/Menu';
const style = {
display: 'inline-block',
margin: '0 32px 16px 0',
width: '100%'
};
const styleq = {
display: 'inline',
float: 'left',
width: '25%'
};
export default class MenuAlumno extends React.Component {
render() {
return (
<div>
<AppBar
title={<span style={STYLES.title}>- PLATAFORMA DE INCIDENCIAS -</span>}
onTitleTouchTap={this.handleTouchTap}
titleStyle={STYLES.titleStyle}
iconElementLeft={this.state.drawerOpen ? <IconButton><NavigationClose/></IconButton> : <IconButton><NavigationMenu/></IconButton>}
onLeftIconButtonTouchTap={this.controlMenu}
/>
<Paper style={style}>
<Menu>
<MenuItem primaryText="Maps" style={styleq}/>
<MenuItem primaryText="Books" style={styleq}/>
<MenuItem primaryText="Flights" style={styleq} />
<MenuItem primaryText="Apps" style={styleq} />
</Menu>
</Paper>
</div>
);
}
}

Answer 1

I had this same question and it has been driving me crazy! lol. I love MUI, but sometimes all the nesting can make things really difficult...
Anyway, this worked for me. Keep your MenuItems as they are and change your Menu props to this:
<Menu autoWidth={false} width="100%" listStyle={{width: '0.01%'}} style={{width:'100%'}}>

Answer 2

You probably have an element with a fixed width.
Is there a URL where to see it working or something that could help me understand what's going on? It's hard just from what you wrote.
UPDATE
When you use the Menu component, set the "autoWidth" props to "false".
As you can see from the code, the default is "true" that will force a width for the menu.
<Menu autoWidth={false}>