material-ui

问题 I work with typescript, react and material-ui. I'm trying to do a snapshot test with jest. But material-ui's MenuItem throw Invariant Violation: getNodeFromInstance: Invalid argument. exception. Here is the component I'm trying to test: import * as React from 'react'; import {MuiThemeProvider, Paper, Menu, MenuItem, Divider} from 'material-ui'; class App extends React.Component < any,any > { public render() { return ( <MuiThemeProvider> <div> <Paper > <Menu desktop={true}> <MenuItem

问题 I'm writing some simple reusable component for our React(with MaterialUI) application. The problem is, that i want to allow different styles of this same reusable component , to be customized via props, by the consuming component. This is some of the code: import { withStyles } from '@material-ui/core'; const styles = theme => ({ image: { maxHeight: '200px' } }); render() { const classes = this.props.classes return ( <div> ... <img className={classes.image} src={this.state.filePreviewSrc} alt

问题 I am trying to use the Drawer component and I have noticed that when the drawer is fed the prop open={true}, there is a default dimmed overlay on the underlying page / div. Is there a best-practice Material-approved way to remove the dimming? I have had some partial success with setting the prop variant={"persistent"} . This stops the dimming, but it also forces me to add a close button just to close the drawer. What I am looking for is the drawer to be closable when clicking outside its

问题 This is a pretty hard question to explain. I am using a fairly basic webpack react + redux + router setup. Within that setup I only use material-ui@1.0.0-beta.43 as user interface package. On the side there is also some additional scss styling. All packages are up to date. In a development environment this all works as expected. However when it is compiled with NODE_ENV set to production the styling becomes really weird. I have checked the webpack config difference between production and

问题 I have a user dashboard build using material-ui list. For each listItem i have a component for it. What I want is, when I click a list element, there is a section dedicated for switching the components. I am having trouble implementing this.Here is my code.I am not sure where to put onClick handler. I will appreciate any lead. Even loggin when a particular listItem is clicked. Then I can go ahead and use react conditional rendering. In the picture below, when a user clicks All events, a

问题 I am getting this error in one of my components and I'm not able to figured out why. I understand that a lot of people have had this issue when they return a reference to a function instead of actually calling it, but as far as I can tell, that isn't my issue. EDIT: I have tried two things for testing purposes: replacing the entire return of the GameTable function with just an empty tag, which produced the same error, and deleting the cleanup() function in useEffect() and it also produced the

问题 Writing unit testing in react using jest and enzyme. While checking with a component state , it throws an error "ReactWrapper::state() can only be called on class components ". import React from 'react'; import { mount } from 'enzyme'; import expect from 'expect'; import CustomerAdd from '../CustomerAdd' import MUITheme from '../../../../Utilities/MUITheme'; import { ThemeProvider } from '@material-ui/styles'; describe('<CustomerAdd />', () => { const wrapper = mount( <ThemeProvider theme=

问题 This should be simple but for some reason I can't figure out how to change the border color on a TextField <TextField style={{ borderColor: 'white', width: '100px' }} variant="outlined" /> It's basically just copied from the docs, where on the outline is white, so I can't figure out what might be messing this up on my end. I tried to reproduce on jsfiddle or something but couldn't find one that would allow me to import the TextField module 回答1: Below is an example of how to override the color

问题 This should be simple but for some reason I can't figure out how to change the border color on a TextField <TextField style={{ borderColor: 'white', width: '100px' }} variant="outlined" /> It's basically just copied from the docs, where on the outline is white, so I can't figure out what might be messing this up on my end. I tried to reproduce on jsfiddle or something but couldn't find one that would allow me to import the TextField module 回答1: Below is an example of how to override the color

问题 This should be simple but for some reason I can't figure out how to change the border color on a TextField <TextField style={{ borderColor: 'white', width: '100px' }} variant="outlined" /> It's basically just copied from the docs, where on the outline is white, so I can't figure out what might be messing this up on my end. I tried to reproduce on jsfiddle or something but couldn't find one that would allow me to import the TextField module 回答1: Below is an example of how to override the color