material-ui

问题 I am using Menu from material-ui and want to change the background color. Problem is, when I give color to Menu, it changes the whole page background when the menu popper appears. And when I apply color to Menu Items, it leaves some grey shades at the top and bottom, because all these menu Items are enclosed inside a div. Problem Sandbox: https://codesandbox.io/s/material-ui-dropdown-background-color-g88e1 What's the right way to change Menu's background color? I tried createMuiTheme for

问题 The colour of a disabled input text field created using material UI is light grey by default and it is not very visible against a white background. Is there any way to change the font colour of a disabled input text field? 回答1: Below is an example of how to do this showing the customized version next to the default styling. import React from "react"; import { withStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import Button from "@material-ui

问题 The colour of a disabled input text field created using material UI is light grey by default and it is not very visible against a white background. Is there any way to change the font colour of a disabled input text field? 回答1: Below is an example of how to do this showing the customized version next to the default styling. import React from "react"; import { withStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import Button from "@material-ui

问题 My goal is when I click on a ListItem, it should change the background-color and text: "line-through" . And then, if I click again, these changes should be canceled. But it happens very strangely for me. I just can't understand why ListItem changes background-color only after I click to any place of the window? And why text into ListItem becomes crossed out only after I move pointer beyond the element const styles = () => ({ listItem: { borderRadius: "1em" }, listItemDone: { borderRadius:

问题 My goal is when I click on a ListItem, it should change the background-color and text: "line-through" . And then, if I click again, these changes should be canceled. But it happens very strangely for me. I just can't understand why ListItem changes background-color only after I click to any place of the window? And why text into ListItem becomes crossed out only after I move pointer beyond the element const styles = () => ({ listItem: { borderRadius: "1em" }, listItemDone: { borderRadius:

问题 I can't follow the documentation of implementing Material UI's media queries because it's specified for a plain React app and I'm using NextJs. Specifically, I don't know where to put the following code that the documentation specifies: import ReactDOMServer from 'react-dom/server'; import parser from 'ua-parser-js'; import mediaQuery from 'css-mediaquery'; import { ThemeProvider } from '@material-ui/core/styles'; function handleRender(req, res) { const deviceType = parser(req.headers['user

问题 I can't follow the documentation of implementing Material UI's media queries because it's specified for a plain React app and I'm using NextJs. Specifically, I don't know where to put the following code that the documentation specifies: import ReactDOMServer from 'react-dom/server'; import parser from 'ua-parser-js'; import mediaQuery from 'css-mediaquery'; import { ThemeProvider } from '@material-ui/core/styles'; function handleRender(req, res) { const deviceType = parser(req.headers['user

问题 Here in this example of material-ui https://material-ui.com/utils/popover/#mouse-over-interaction Follow these steps for the example material-ui https://material-ui.com/utils/popover/#mouse-over-interaction In the above example keep the mouse on the text Hover with a Popover. --- you see the popover Try to move your mouse near the popover --- popover disappears right? But I wanna show the popover even if I hover on popover And make popover disappear only if the user is not hovering on either

问题 I'm trying to display a grid of Avatar images. While in a transition state I would like for a skeleton representation of the Image to appear. For that I'm using @material-ui/lab/Skeleton . The problem I'm having is that, because my images are set to autoscale within a grid using height: auto, width: 100% , and the height/length of the content displayed under the image varies, there is no set height val that I can pass over to the skeleton component. You can see the problem this causes if you

问题 After perusing the source code I've tried the following, which works but generates a warning in the console. const myTheme = createMuiTheme({ overrides: { MuiSwitch: { checked: { "& + $bar": { opacity: 1.0, backgroundColor: "rgb(129, 171, 134)" // Light green, aka #74d77f } } } } }); The error/warning I get is: Warning: Material-UI: the `MuiSwitch` component increases the CSS specificity of the `checked` internal state. You can not override it like this: { "checked": { "& + $bar": { "opacity"