As of 0.20.1 you can helperText and error props <TextField hintText=”Phone” error ={this.state.errorText.length === 0 ? false : true } floatingLabelText=”Phone” name=”phone” helperText={this.state.errorText} onChange={this.onChange.bind(this)}/>
You need to include the <CssBaseline /> component at the root of your app as this is what deals with changing the background colour on the body. Docs
Have you tried with Box component? You could do something like <Typography component=”div”>Normal text <Box fontWeight=”fontWeightMedium” display=’inline’>medium font weight text</Box> and some more normal text</Typography> Note that component=”div” prop on Typography wrapper is required as Box component cannot be nested under the Typography’s default p. Source Typography font weight
To really understand which one to use, we need to understand what’s happening under the hood. Material UI uses emotion(, or whatever styling engine you chose manually), in order to style its components. On the surface, the following two might seem to be doing the same thing: <Box sx={{ height:’50px’, width:’25px’ }}/> <div style={{ height:’50px’, … Read more
Explanation The reason for MUI Modal component having the error TypeError: Cannot read property ‘hasOwnProperty’ of undefined Is that you didn’t give a JSX component as a child. Solution Change from this <Modal open={true}> Hello </Modal> to <Modal open={true}> <div> Hello </div> </Modal> More If you search the source of Material-UI project by the keyword … Read more
Try This <TextField type=”number” label=”Short stop treshold” InputProps={{ inputProps: { min: 0 } }} value={10} onChange={handleShortStopChange} />
FormControlLabel’s label prop accepts a node, so you can pass in a Typography element and style it the same way you style the rest of the text in your app. eg. <FormControlLabel label={<Typography variant=”body2″ color=”textSecondary”>Foo</Typography>} />
You have to import the image as the following, using the relative path. import React from ‘react’; import Paper from ‘material-ui/Paper’; import IconButton from ‘material-ui/IconButton’; import ActionHome from ‘material-ui/svg-icons/action/home’; import Image from ‘../img/main.jpg’; // Import using relative path const styles = { paperContainer: { backgroundImage: `url(${Image})` } }; export default class Home extends React.Component{ render(){ … Read more
You need to install the date-fns package from NPM using npm install –save date-fns.
You probably don’t want to change the button’s :active state but the default and the :hover state. The following sets the button color to #fff and the backgroundColor to #3c52b2 and switch them on :hover. I’m not sure how you applied the updated styles (or how you tried to override the default styles), I created … Read more