material-ui

问题 Focused, checked classes seems to not work properly. I need to always use !important or use jss styles provided by material-ui. For example: https://codesandbox.io/s/css-modules-nvy8s?file=/src/CssModulesButton.js CssModulesButton.module.css .checkboxtest { color: blue; } .checkboxtestworking { color: blue !important; } CssModulesButton.js import React from "react"; // webpack, parcel or else will inject the CSS into the page import styles from "./CssModulesButton.module.css"; import Checkbox

问题 Stuck with a strange situation where neither react input nor material-ui TextField works when put inside a material-ui TreeView. The same work when pulled out of the TreeView. Sharing the code below CustomTreeView.js import React, { useState } from "react"; import Grid from "@material-ui/core/Grid"; import Paper from "@material-ui/core/Paper"; import TreeView from "@material-ui/lab/TreeView"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import ChevronRightIcon from "@material

问题 I'm trying to use only Grid to create a SPA. I'm used to material-ui Grid and use it a lot, however in my new project I'm not sure what I'm doing wrong. Right now this is the problem: There is a margin on the right side and a horizontal scrollbar. I know about the negative margin limitation, but if I apply a padding to the parent element (as the documentation says), then my Grid element loses the full width functionality: The horizontal scrollbar goes away, but then I have a padding on my

问题 I'm using the multi-select with checkboxes from material ui v4. The provided default settings display an array of 'SELECTED' values. renderValue={selected => selected.join(', ')}. However, I would like to remove this function and only display a permanent label. It seems that the display value is being tied to the value of the component itself. Does anybody knows how to work around this? <FormControl className={classes.formControl}> <InputLabel htmlFor="select-multiple-checkbox">Tag<

问题 I am learning React and want to make a editable table where the $/Unit cell changes with Price and Units cells. I struggle to find a way to access other cell values. Is it a possible to do it with Material UI table? CodeSandbox: https://codesandbox.io/s/elated-meadow-486z9 import React from "react"; import MaterialTable from "material-table"; export default function CustomEditComponent(props) { const { useState } = React; const [columns, setColumns] = useState([ { title: "Product", field:

问题 I would like to display default value to my Autocomplete TextField component from Material UI in React.js. A pre-populated value that is automatically loaded from the users' profile and that can be changed with another one from the list. Here is my code: import React from 'react'; import TextField from '@material-ui/core/TextField'; import Autocomplete from '@material-ui/lab/Autocomplete'; export const ComboBox =() => { return ( <Autocomplete id="combo-box-demo" options={top100Films}

问题 I have requirement wherein i want my date picker to highlight weekend days i.e saturday and sunday. I have been using material-Ui-datepicker https://material-ui-pickers.dev/demo/datepicker. I tried various way but not working. Please anyone can help me on this? 回答1: You can use renderDay prop. It allows customizing any day. Here is an official example of how to change displaying of random day. You basically need to change the appearance for weekends. https://material-ui-pickers.dev/demo

问题 I have a Material UI slider that won't slide when you click on it and drag it. I've more or less copied one of the examples from https://material-ui.com/components/slider/ and added an onChange function. The values update just fine if you click around to different spots. I've been staring at this too long and have gone code blind and can't figure out what I'm missing. Here's a link to a Sandbox import React, { useState } from "react"; import PropTypes from "prop-types"; import withStyles from

问题 I am using Material UI with Reactjs. I have issues with the Grid List Component. I am trying to have a grid - 1000x1000px so I specified the height and width in the custom gridList style as 1000 and 1000 respectively as in the documentation. There should be 10 columns and each cell should have a height of 100px. Problem comes when I have more than 1 row in the grid list. There is too big a gap between the row elements. I tried to override the CSS styles but none of them work nicely. I would

问题 How can I refer the palette in a theme override? e.g. I want to change the selected Tab to have the secondary color as background, instead of hardcoded blue const theme = createMuiTheme({ overrides: { MuiTab: { root: { "&$selected": { backgroundColor: "blue" }, // TODO palette.secondary.main instead of blue } } }, palette: { primary: { main: "black" }, secondary: { main: "blue" } } }); 回答1: You can create palette object that you can refer to: import { createMuiTheme } from '@material-ui/core'