material-ui

问题 Where should I put following line to get my component ready? const classes = useStyles(); Try to use Material-UI MenuList component, but need to use in my existing MainPage code, what is slightly different from Material-UI code example. 回答1: I think for class properties, the syntax should be something like class Foo { classes = useStyle(); } 回答2: Could you try to call it inside render lifecycle If i'm not wrong, u can't create const directly inside class, the order should be class > function

问题 I am trying to use one of the platinum themes from React Material-UI, link below: https://material-ui.com/premium-themes/ but I can't find instructions for how to use them in my application. Can someone explain how can I use a platinum theme in my React application? 回答1: To use one of the free premium themes, just click the link to go to the "Source Code" and then you can look at the code for the example. For instance, for the Paperbase theme you can find the source code for the theme here:

问题 Using ReactJS and MaterialUI I'm trying to have the same width for all columns of a Table. I expected to have this as a default behavior when I'm not setting any width, but it's not the case: the last column is always smaller. I've made a small example on codesandbox: https://codesandbox.io/s/18l6nn393q Actually I could set the width of all columns to 33% and it would work for this specific case, but it gets complicated if the number of columns is variable. What is the standard way to have

问题 According to the MUI Texfield API here, Textfield is a simple abstraction on top of the following components FormControl Input InputLabel FilledInput OutlinedInput Input FormHelperText And therefore, to change the styling of the Textfield for any of the components above, like for example notchedOutline class, which is a class for OutlinedInput, i can just do the following import { TextField } from '@material-ui/core'; const style = theme => ({ notchOutline: { /*style in here*/ } });

问题 I want to customize the expansionpanel in material ui.I see that the data i want to render on expansion panel takes too much space because of the default styling of the expansion panel. <ExpansionPanel defaultExpanded={isCurrentInning}> <ExpansionPanelSummary classes={{ expanded:classes.expandedPanel }} expandIcon={<ExpandMoreIcon className="label"/>}> <div className={classes.inningInfoContainer}> <div className={classes.teamNameOrderContainer}> <span className="label"> <img src={image} width

问题 I want to customize the expansionpanel in material ui.I see that the data i want to render on expansion panel takes too much space because of the default styling of the expansion panel. <ExpansionPanel defaultExpanded={isCurrentInning}> <ExpansionPanelSummary classes={{ expanded:classes.expandedPanel }} expandIcon={<ExpandMoreIcon className="label"/>}> <div className={classes.inningInfoContainer}> <div className={classes.teamNameOrderContainer}> <span className="label"> <img src={image} width

问题 I have a material-ui-time-picker and I want to control this input, it works well, but I want to edit the time input from the keyboard and not when I click the input on the clock. My code is : import React, { Component } from "react"; import { TimePicker } from "material-ui-time-picker"; import { Input as Time, Dialog as Clock } from "@material-ui/core"; openDialog = () => this.setState({ isOpen: true }); closeDialog = () => this.setState({ isOpen: false }); handleDialogTimeChange = newValue =

问题 I have a material-ui-time-picker and I want to control this input, it works well, but I want to edit the time input from the keyboard and not when I click the input on the clock. My code is : import React, { Component } from "react"; import { TimePicker } from "material-ui-time-picker"; import { Input as Time, Dialog as Clock } from "@material-ui/core"; openDialog = () => this.setState({ isOpen: true }); closeDialog = () => this.setState({ isOpen: false }); handleDialogTimeChange = newValue =

问题 I'm using the Material-ui-next Select component in a project. Most of the styles are being overriden using the classes prop. But the selected key can't get to work even using MuiThemeProvider . Here is the relevant parts of the code: ... const theme = createMuiTheme({ overrides: { MuiMenuItem: { selected: { backgroundColor: 'transparent', } } } }); ... class SelectMUI extends Component { render() { const {className, name} = this.props return ( <MuiThemeProvider theme={theme}> <Select classes=

问题 I'm trying to figure out how to annotate the types of the following styles (I converted from plain JavaScript to TypeScript and am adding type annotations): import * as React from 'react' import { withStyles } from '@material-ui/core' @withStyles(styles) // TYPE ERROR HERE export default class App extends React.Component<{}, {}> { render(): JSX.Element { return ( <div className="some-class"> Hello </div> ) } } function styles() { return { // assume I need to use global styles, my actual