material-ui

问题 I have an issue with searchkit using with material-ui. Both of libraries needs reactjs, but different versions. First time, when i used only searchkit with react, my app worked good, with no errors and warnings. Then i connected material-ui to my app, and got warnings like so: warning.js:44 Warning: You are manually calling a React.PropTypes validation function for the insetSubheader prop on List . This is deprecated and will not work in the next major version. You may be seeing this warning

问题 I'm following this tutorial to learn about dynamic forms. It uses the input's className with a custom name and the id property. <input type="text" name={ageId} data-id={idx} id={ageId} value={cats[idx].age} className="age" <----------------------- /> To be able to do this in the function that handles changes: handleChange = (e) => { .... if (["name", "age"].includes(e.target.className) ) { let cats = [...this.state.cats] cats[e.target.dataset.id][e.target.className] = e.target.value

问题 i just started a reactJS project and when i decided to use material-ui it statrted throwing a lot of errors like this one: bundle.js:12441 Warning: Failed Context Types: Calling PropTypes validators directly is not supported by the prop-types package. Use PropTypes.checkPropTypes() to call them. Read more at fb.me/use-check-prop-types Check the render method of CardHeader . my App component looks like this: import React from 'react'; import PropTypes from 'prop-types'; import NavBar from '.

问题 Working from the demo here: https://material-ui.com/demos/selects/ and I'm receiving some weird results. Specifically, when I select an item from the drop-down menu, the this.props.value updates fine... but the MenuItem does not show up. If I put the <FormControl> tag directly in render, it works fine. If I put in an a variable, then setState with that and insert that into the render... it does NOT work. Example: import React from 'react'; import PropTypes from 'prop-types'; import {

问题 I'm trying to create a reusuable material-ui colored checkbox component, you pass a hex color to the component and it affects the checkbox's color. I got this so far but i can't think of a way to pass a color to withStyles... const WhiteCheckbox = withStyles({ root: { color: '#fff', '&$checked': { color: '#fff', }, }, checked: {}, })(props => <Checkbox color="default" {...props} />); Thanks in advance if you have any tip to make it work. 回答1: You can leverage props within styles by using a

问题 I have recently updated material-ui to version 0.15.4 from 0.14.4 . I had to add getMuiTheme() to make it work in few components. But in one of the components, I am getting the following error and I am not able to understand what's happening. Error: "Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of PortalPage" Code Snippet: var React = require('react'), mui = require(

问题 So far in the API ( v3.9.2 ), I see a mention of TouchRippleProps for ButtonBase for https://material-ui.com/api/button-base/ My button looks like <Button variant="text" size={"large"} fullWidth className={classes.button} > {value} </Button> and my button style is . button: { backgroundColor: colors.surface, borderRadius: 0, // to make buttons sharp edged touchRipple: colors.primary } When I touch a button, I see a white background (see number 5 ) as My question is that When I touch a button,

问题 I am new to Material UI and am trying to use V1. Is there Select Field in V1. I can't find it. Is it replaced by something else? Thanks 回答1: As of material V1.2 : import Select from '@material-ui/core/Select'; ... <Select value={this.state.age} onChange={this.handleChange} inputProps={{ name: 'age', id: 'age-simple', }} > <MenuItem value=""> <em>None</em> </MenuItem> <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select> 回答2

问题 I have this export of a working component: export default connect( mapStateToProps, actions, null, { withRef: true, forwardRef: true } )(withTheme()(withStyles(styles)(MainMenu))); And its call: <MainMenu ref={(connectedMenu) => this.menuRef = connectedMenu.getWrappedInstance()} user={user} /> I've expected to get a MainMenu ref, but I keep getting WithTheme object instead. I've also tried to get through innerRef, but got the following errors: TypeError: connectedMenu.getWrappedInstance is

问题 What is wrong in this code? I put it together from a material-ui example and facebook login button react example. import React, { Component } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material