Looking to create an app with responsive font sizes using material-ui (v1.3)? Also, want the font size to shrink when the screen size is smaller and adjust automatically. However, the current code doesn't update the font size dynamically as the screen size changes. Need help to figure out why it's not working?
class App extends Component {
constructor(props) {
super(props);
this.state = {
open: false,
};
}
getDrawerFontSize() {
if (window.innerWidth <= 575) {
return '10px';
} else if (window.innerWidth <= 767) {
return '11px';
} else if (window.innerWidth <= 991) {
return '12px';
} else if (window.innerWidth <= 1199) {
return '13px';
}
return '14px';
}
render() {
const drawerFontSize = this.getDrawerFontSize();
const { open } = this.state;
const theme = createMuiTheme({
overrides: {...}
});
const styles = {...};
return (
<MuiThemeProvider theme={theme}>
...
...
... // The rest of the code goes here
} }
export default withRouter(connect( mapStateToProps, mapDispatchToProps)(App));