material-ui

问题 I'm building a new project with SSR using Next.js, MaterialUI and styled-components. From what I know, MaterialUI uses JSS as a tool for SSR (according to the example in its repository). I wonder if anyone knows how I can make it work with styled-components. I opened issues in MaterialUI and styled-components repositories, both authors answered me that they don't know how to make it work together. But probably anyone did it already? Or at least can tell me where to dig to solve this problem.

问题 I am using the Material UI autocomplete field (https://material-ui.com/api/autocomplete/#css) I have been able to modify everything my custom Autocomplete component has on its own root but not renderedInput of the variant style that is a filled TextField. Currently the class is as such: .MuiAutocomplete-inputRoot[class*="MuiFilledInput-root"] { padding-top: 19px; padding-left: 8px; } I can affect the background color of inputRoot:{} but cannot remove these paddings at all. I only want this

问题 I am using the Material UI autocomplete field (https://material-ui.com/api/autocomplete/#css) I have been able to modify everything my custom Autocomplete component has on its own root but not renderedInput of the variant style that is a filled TextField. Currently the class is as such: .MuiAutocomplete-inputRoot[class*="MuiFilledInput-root"] { padding-top: 19px; padding-left: 8px; } I can affect the background color of inputRoot:{} but cannot remove these paddings at all. I only want this

问题 I am using the Material UI Autocomplete component with multi select. It works great on desktop, but on mobile, I would like to disable keyboard input and only allow touch selection. In other words, I don't want the smartphone keyboard to appear. I did not find any params for this in the docs: https://material-ui.com/api/autocomplete/#props I tried to disable the TextField, but I could still enter text - it seems that the disabled param does not get added to the input field in the page source:

问题 The problem is when used classes={{blah blah}}, it was working fine locally also default material class names were having no identifiers. But on some other machine the css broke, after checking what went wrong I came to know that className generator or something I don't know what, changed my overrides by adding counter number to the classNames I have used. So now it looks something like this. Now I don't want to rewrite css again also I can't because this is how you override Mui classes.

问题 I have a project in React, using Material UI, and I am applying one of their suggested methods to reduce my bundle size. Basically, I need to install the babel-plugin-transform-imports package and update the way we import components: // Replace this (Option 1): import Button from "@material-ui/core/Button"; // Whith this (Option 2): import { Button } from "@material-ui/core"; Everything is working fine, however, I would like to prevent the "wrong" imports (Option 1) in the future. Is there a

问题 here's the general synopsis of what I'm trying to do: When the user clicks a checkbox in a row, that row is saved from being deleted (typically the user will click more than row). Every record without a checked checkbox is deleted once the user hits "purge records" button. I got some general advice on how to do it, and I used the advice I was given accompanied by my own logic to come up with an implementation. The issue is that although I think my logic looks good and all my console.log

问题 AutoComplete uses Menu to render MenuItems as shown in the docs on those pages. I need to change the backgroundColor of the hovered MenuItem. I am able to change color of all items by using "menuItemStyle" which expects a style object but I'm not sure what the syntax for hover style is in the Material-UI style objects. 回答1: They are still working on hoverColor which is possible in List Item. But for the time being you can use these Props <MenuItem primaryText="MenuItem" onMouseEnter={(e) => e

问题 Is there a possibility to use the Material-UI "theme"-prop with styled-components using TypeScript ? Example Material-UI code: const useStyles = makeStyles((theme: Theme) => ({ root: { background: theme.palette.primary.main, }, })); Now I want to replace this code with styled-components. I have tested the following implementation (and other similar implementations) without success: const Wrapper = styled.div` background: ${props => props.theme.palette.primary.main}; `; 回答1: You can use

问题 I am using Material-UI's <LinearProgress variant="determinate" /> component which by default transforms the scaleX() property of a <div> inside another <div> whenever the value changes to visualize the current progress. It does so with an easing effect to make everything look smooth which generally is quite nice, however for the purpose of my application (audio seekbar) I would like to disable this animation entirely whenever the value changes. Is it possible? Demo codesandbox 回答1: I was able