So, I am using react with MUI (latest version), but the custom CSS is not working as in console. It is showing that.
makestyles is no longer exported from #mui/material/styles ,instead try this #mui/styles
But after using it, it's raising an error which is.
Failed to resolve import "#mui/styles" from "src\component\leaderboard.jsx". Does the file exist?
Here is my code.
import React from 'react'
import Container from '#mui/material/Container'
import Button from '#mui/material/Button'
import {Grid} from '#mui/material'
import {Typography} from '#mui/material'
import {makeStyles} from '#mui/material/styles'
const useStyles = makeStyles({
btnLeader: {
margin: '1rem',
},
})
const Leaderboard = () => {
const classes = useStyles()
return (
<Container align='center'>
<Typography
variant='h4'
align='center'
fontFamily='revert-layer'
color='black'
gutterBottom>
Leaderboard
</Typography>
<Grid
container
spacing='5m'
justifyContent='center'>
<Grid item>
<Button
variant='contained'
className={classes.btnLeader}
align='center'>
Register
</Button>
<Button
variant='outlined'
align='center'>
Top Gainers
</Button>
</Grid>
</Grid>
</Container>
)
}
export default Leaderboard
It looks like you are using an outdated version of Material-UI. The makeStyles API has been moved to a new package #material-ui/styles in the latest version. Try installing and importing like that:
npm install #material-ui/styles
import { makeStyles } from '#material-ui/styles';
Also, make sure that the #material-ui/styles package is installed in your project and the import path is correct.
If you are still encountering an error, make sure that you have installed the latest version of #mui/styles in your project. First try to run that.
With NPM
npm install #mui/styles
Or, with yarn
yarn add #mui/styles
Then try to use that.
import { makeStyles } from '#mui/styles';
Here is the official documentation:- MUI Material. Please read this first for better understanding.
The things are that #mui/styles is not compatible with React.StrictMode or React 18. And #mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the #mui/material any more, deprecated in v5.
makeStyle is deprecated in MUI v5. Instead you can use styled, or the very easy to use sx-prop.
styled
import { styled } from "#mui/material/styles";
import { Button } from "#mui/material";
const StyledButton = styled(Button)({
margin: "1rem",
});
export default function Test() {
return <StyledButton variant="contained">styled button</StyledButton>;
}
sx-prop
import { Button } from "#mui/material";
const classes = {
btnLeader: {
margin: "1rem",
},
};
export default function Leaderboard() {
return (
<Button variant="contained" sx={classes.btnLeader}>
sx prop button
</Button>
);
}
Related
Hi I get this error when trying to use Typography element with material-ui-5:
export 'default' (imported as 'typography') was not found in '#mui/material/typography'
here is my code:
import React from 'react';
import Typography from '#mui/material';
export default function Create() {
return (
<div>
<Typography>
Create Page
</Typography>
</div>
)
}
use this :
import {Typography} from '#mui/material';
or
import Typography from '#mui/material/Typography';
I have a local svg files I downloaded from ionicons website.
I'm trying to change their font size and color, but nothing works.
I tried with img tag and change in the css file, didn't work.
I tried with IonIcon, which also does not work.
This is what I have right now:
const AppHeader = () => {
return (
<div className="header">
<div className="iconsContainer">
<IonIcon src={searchIcon} size="36px" color="white"></IonIcon>
<IonIcon src={cartIcon} size="36px" color="white"></IonIcon>
</div>
</div>
);
};
I also couldn't find anything about IonIcon in Ionic's website and IonIcon's go to definition in VSCode does not work for some reason.
The svg does display, but I can't change the size and color.
Use it like this
<IonIcon icon={searchIcon} style={{fontSize:32, color: 'white'}}/>
Did you import IonIcon like that:-
import { IonIcon } from "#ionic/react";
If you are trying to use ionic icons you need to import the name as well:-
import { search } from "ionicons/icons";
Example with SVG/Images
<IonIcon src="/assets/icons/searchIcon"/>
Example with ionic icons
<IonIcon icon={search} style={{fontSize:36, color: 'white'}} />
I am using material UI Select and we are using chrome WAVE tool to fix ADA issues. An error of 'Missing form label' is coming on material UI Select like in the below screenshot. Can anyone help me to solve this issue. Thanks in advance.
wave tool: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
code:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import InputLabel from '#material-ui/core/InputLabel';
import MenuItem from '#material-ui/core/MenuItem';
import FormHelperText from '#material-ui/core/FormHelperText';
import FormControl from '#material-ui/core/FormControl';
import Select from '#material-ui/core/Select';
const useStyles = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));
export default function SimpleSelect() {
const classes = useStyles();
const [age, setAge] = React.useState('');
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<div>
<FormControl className={classes.formControl}>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
);
}
screenshot:
I have found one solution for it. Just add htmlFor="demo-simple-select-placeholder-label" in InputLabel tag to rmove the 'missing form label' error.
The error says that the input element, which by the way is aria-hidden="true", has no label.
I think it's a problem similar to the one reported about TablePagination answered here, and to the one about TextareaAutosize discussed here. The element is always hidden to screen readers and the select behavior is implemented with javascript.
WAVE plugin is reporting the error because they prefer report more than less, in case the hidden element is shown at some point like they explain here.
I was able to get the warning to go away by adding htmlFor={'input-id'} to the InputLabel, and adding inputProps={{id: 'input-id'}} to the Select.
My simple NextJS page looks like this (results can be viewed at https://www.schandillia.com/):
/* eslint-disable no-unused-vars */
import React, { PureComponent, Fragment } from 'react';
import Head from 'next/head';
import compose from 'recompose/compose';
import Layout from '../components/Layout';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
const styles = {
root: {
textAlign: 'center',
paddingTop: 200,
},
p: {
textTransform: 'uppercase',
color: 'red',
},
};
class Index extends PureComponent {
render() {
const { classes } = this.props;
const title = 'Project Proost';
const description = 'This is the description for the homepage';
return (
<Fragment>
<Head>
<title>{ title }</title>
<meta name="description" content={description} key="description" />
</Head>
<Layout>
<p className={classes.p}>amit</p>
<Button variant="contained" color="secondary">
Secondary
</Button>
</Layout>
</Fragment>
);
}
}
export default withStyles(styles)(Index);
I am importing a bunch of components off the #material-ui/core library to style my items. I also have a local style definition assigned to a style constant.
What seems to be happening here is that my style isn't getting rendered on the server which is why the files being served upon load are sans-style. And then the CSS gets rendered by the client-side code. As a result, there's a flash of unstyled content that lasts almost a second, long enough to be noticable.
Any way to fix this? The entire codebase is up for reference at https://github.com/amitschandillia/proost/tree/master/web.
I ran a similar problem when tried to make a production build of my app, that uses material-ui. I manage to solve by adding a JSS Provider like this:
import JssProvider from "react-jss/lib/JssProvider";
class App extends Component {
render() {
<JssProvider>
*the rest of your material-ui components*
</JssProvider>
}
}
Here's the solution - https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js .
Basically, all you need to do is to sync server-side class names with client-side. The link above shows what you need to do to fix that issue.
In a react-admin SimpleForm component validation is working fine when I click the save button. The field that is required is highlighted and marked red when I click the save button.
I'd like to add a className to the SaveButton as long as the form is invalid. This way I can make it clear to the user that he's not done with the form yet and prevent the user from clicking it.
This is a simplified version of such a SimpleForm.
import {
required,
//...
} from 'react-admin';
const UserCreateToolbar = props =>
<Toolbar {...props}>
<SaveButton
label="user.action.save_and_show"
redirect="show"
submitOnEnter={true}
/>
</Toolbar>;
export const UserCreate = props =>
<Create {...props}>
<SimpleForm
toolbar={<UserCreateToolbar />}
>
<TextInput source="name" validate={[required()]} />
</SimpleForm>
</Create>;
You can create your own SaveButton component, connected to redux, which will get the validation status from the state (check the redux-form documentation) for the form which is always named record-form in react-admin.
Then, you can apply the disabled prop on the button and eventually tweak its styles
Here's my own SaveButton component I came up with. It's working for me. Thanks #Gildas for pointing me in the right direction.
import React from 'react';
import PropTypes from 'prop-types';
import { reduxForm } from 'redux-form';
import { SaveButton } from 'react-admin';
const SaveButtonAware = ({ invalid, ...rest }) => (
<SaveButton disabled={invalid} {...rest} />
);
SaveButtonAware.propTypes = {
invalid: PropTypes.bool,
};
export default reduxForm({
form: 'record-form',
})(SaveButtonAware);
Update. Apparently, this is working too. Not sure why.
import React from 'react';
import PropTypes from 'prop-types';
import { SaveButton } from 'react-admin';
const SaveButtonAware = ({ invalid, ...rest }) => (
<SaveButton disabled={invalid} {...rest} />
);
SaveButtonAware.propTypes = {
invalid: PropTypes.bool,
};
export default SaveButtonAware;
You should first create a customized toolbar and set Save button's disabled element to Toolbars invalid state, as shown below. ( Toolbar always have the state of form)
import * as React from "react";
import {
Toolbar,
SaveButton
} from 'react-admin';
const CustomToolbar = (props) => (
<Toolbar {...props}>
<SaveButton disabled={props.invalid}/>
</Toolbar>
);
export default CustomToolbar;
Then use this customized toolbar in your form like shown below:
<SimpleForm redirect="list" toolbar={<CustomToolbar/>}>
{your form elements}
</SimpleForm>