Thanks for clarifying your problem on my request. for this behavior I would suggest you to use min-widht and max-widht to make you table cell looks similar on every screen, please use below CSS in your stackblitz th.mat-header-cell, td.mat-cell { text-align: center; border: 1px solid #ccc; padding: 0 !important; min-width: 100px; max-width: 100px; } Also … Read more
The text focus navigation functionality is implemented in the onKeyDown of MenuList (I implemented it about 6 months ago). Stopping propagation of that event on the MenuItem (it would also work to stop propagation on the TextField) prevents the event from reaching MenuList. import * as React from “react”; import { render } from “react-dom”; … Read more
I had the exact same issue. Turned out that Webpack would mess around with Material UI’s rules of JSS precedence. You need to manually override the injection order using the index option. In your makeStyles() or withStyles(), add {index: 1}: //Hook const useStyles = makeStyles({ // your styles here }, {index: 1}) // HOC MyComponent … Read more
Normally in v4, you’d import the style API from @material-ui/core/styles. This one uses JSS behind the scene: import { makeStyles } from ‘@material-ui/core/styles’; In v5, they changed the brand name to MUI. As a result, the package name changed too: import { makeStyles } from ‘@mui/material/styles’; But MUI v5 also drops the support for JSS … Read more
For Material UI 1.0 with Typescript: see this post by @ogglas below. For Material-UI 1.0 with plain JS: <Tabs value={value} onChange={this.handleChange}> { this.props.tabs.map( ({label, path})=><Tab key={label} label={label} className={classes.tabLink} component={Link} to={path} /> ) } </Tabs> And classes.tabLink is defined as: tabLink : { display:”flex”, alignItems:”center”, justifyContent:”center” } How this works? All the mui 1.0 components inheriting … Read more
Below is an example of the correct syntax for v4 (“& $addIcon” nested within &:hover). Further down are some v5 examples. import * as React from “react”; import { render } from “react-dom”; import { Grid, makeStyles } from “@material-ui/core”; import AddIcon from “@material-ui/icons/Add”; const useStyles = makeStyles(theme => ({ outerDiv: { backgroundColor: theme.palette.grey[200], padding: … Read more
By using the breakpoints attribute of the theme, you can utilize the same breakpoints used for the Grid and Hidden components directly in your component. API theme.breakpoints.up(key) => media query Arguments key (String | Number): A breakpoint key (xs, sm, etc.) or a screen width number in pixels. Returns media query: A media query string … Read more
See this answer for more detail. In short, makesStyles/withStyles is not the first class APIs in MUI v5 anymore and is scheduled to be removed in v6. If you use the old API, you have to add a theme yourself. In v4 you can import makeStyles from @material-ui/core/styles without having to supply a custom theme. … Read more
The documentation for this is here: https://material-ui.com/customization/globals/#default-props Here is an example of how to do this in v4 (v5 example further down): import React from “react”; import ReactDOM from “react-dom”; import {createMuiTheme, MuiThemeProvider, Button} from “@material-ui/core”; const theme = createMuiTheme({ props: { MuiButton: { variant: “contained”, color: “secondary” } } }); function App() { return … Read more
I suspect that the problem lies in the fact that you are calling your state setter immediately inside the function component body, which forces React to re-invoke your function again, with the same props, which ends up calling the state setter again, which triggers React to call your function again…. and so on. const SingInContainer … Read more