material-ui | 易学教程

How to overload material Switch component css

阅读更多关于 How to overload material Switch component css

问题 I am trying to overload the MuiSwitch-track class of switch but it's not working.Basically i want to overload for a particular switch. I tried using "@global": { ".MuiSwitch-track": { backgroundColor: "#d80c0a" } but it overloaded all switches. Is there any way to do the same for a single switch. <Switch style={ this.state.switchChecked ? { color: "rgb(65, 207, 65)" } : { color: "#d80c0a" } } size="small" checked={switchChecked} onClick={this.handleSwitchState} value="userSwitch" /> 回答1:

Material UI nested theme providers breaks withStyles HOC

阅读更多关于 Material UI nested theme providers breaks withStyles HOC

问题 I have a React application created with Create React App and I use the @material-ui/core npm package for theming. To customize components I use the withStyles higher-order component provided by MaterialUI. According to documentation it supports nested ThemeProviders https://material-ui.com/customization/theming/#nesting-the-theme. But inside the child ThemeProvider withStyles won't apply classes. Here is a basic application demonstrating the issue -> https://codesandbox.io/s/vibrant-tree

Material UI nested theme providers breaks withStyles HOC

阅读更多关于 Material UI nested theme providers breaks withStyles HOC

Adding onclick to UI material button

阅读更多关于 Adding onclick to UI material button

问题 I am trying to add an onClick eventhandler into a material ui and sometimes it is called, sometimes it is not. However, it's working fine with regular buttons handleClick = (event) => { const value = event.target.value; console.log(value); this.setState({ filtered: this.state.videos.filter(item => { return item.category === value }) }) <Button value="java" onClick={this.handleClick} color="primary">Java</Button> <Button value="React" onClick={this.handleClick} color="primary">React</Button>

React charset not display correctly UTF-8

阅读更多关于 React charset not display correctly UTF-8

问题 I use to Materiul-UI kit for react, After build, UTF-8 character set does not correctly display. Instead of UTF-8 character set exc. 'Ş,Ü,ö,Ç,ç', Shows that question symbol. '?' I try this on my single page html. <meta charset="utf-8"> but doesn't work. Giriş --> Giri? 回答1: Well, if you have added the meta tag with charset to html <head> there might be a problem with: Your code editor or IDE is not using UTF-8 charset (check your settings). You're using a custom font in your app that hasn't

Using Material-UI System with Default Components

阅读更多关于 Using Material-UI System with Default Components

问题 Is it possible to use Material-UI System with the default Material UI components? For example, this currently does not work: <AppBar bgColor="secondary.main" p={{ xs: 2, sm: 3, md: 4 }}>...</AppBar> I am wondering, though, is there a way to get this to work (not just for AppBar , but for any Material UI component)? I.e., is there a way to integrate System with the default Material UI components? If so, how? Thanks. 回答1: The Box component can be used to add the Material-UI System features to

How can I override the style of the Material-UI switch component when checked?

阅读更多关于 How can I override the style of the Material-UI switch component when checked?

问题 I want to control the color of the switch component, both when it is checked and when is is unchecked. By default it is red. I want the "ball knob" to be yellow when the state of the switch is checked: true and I want it to be grey when is it checked: false I must be achieving the styling with the use of createMuiTheme and ThemeProvider I cannot be using classes directly on the component due to the nature of my project. I have tried to follow the styling example of their custom purple knob

Property 'value' does not exist on type 'never'. when use useRef hook in mui

阅读更多关于 Property 'value' does not exist on type 'never'. when use useRef hook in mui

问题 I am using material UI to build a login and registration page, using useRef to return a TextFiled ref instance, and xxxRef.current.value to get the input value. I can smoothly run my project and can get the value correctly，but the console always reminded me that: Property 'value' does not exist on type 'never'. Here is my code snippets： const accountRef = useRef(); <TextField variant="outlined" margin="normal" required fullWidth id="account" label="Account" name="account" autoComplete=

Material ui drag and drop table row to other table

阅读更多关于 Material ui drag and drop table row to other table

问题 In reactjs I am using material-ui. Is there a way where I can drag a row from one table and drop to another table on same page and vice versa? Also user should be able to add there own row with the data in both the tables 来源： https://stackoverflow.com/questions/63738982/material-ui-drag-and-drop-table-row-to-other-table

TypeError: Cannot read property 'map' of undefined react this.props.rsl['data']

阅读更多关于 TypeError: Cannot read property 'map' of undefined react this.props.rsl['data']

问题 I'm facing an issue with the map function and it shows data in console log console.log("iiiiiiiiii",this.props.rsl['data']) but when I use map function {this.props.rsl['data'].map(row=>{}) , it throws a error saying it throws error saying TypeError: Cannot read property 'map' of undefined render(){ const {classes}=this.props; console.log("iiiiiiiiii",this.props.rsl['data']) return( <Paper className={classes.root}> <div className={classes.tableWrapper}> <Table> <EnhancedTableHead rows={this