MUI v5 - Styled() and typescript - reactjs

I'm using MUI v5 and decided to migrate from makeStyles to styled() utility function. I have this styled div:
import { styled } from "#mui/system";
export const WelcomeDiv = styled("div")({
background: "blue",
});
I try to import it use it this way:
return (
<WelcomeDiv>
</WelcomeDiv>
);
Thing is, I've just started using typescript and not sure how to implement it.

Related

Convert Style ts file from Material V4 to V5

I am trying to migrate from material v4 to v5, the issue i am facing is previously I had a styles.ts file that I would import into my component and the start of the class looked like this:
import {
defaultFont,
primaryColor,
infoColor,
successColor,
warningColor,
dangerColor,
grayColor,
} from "../material-kit-pro-react";
import { makeStyles, Theme, createStyles } from "#material-ui/core";
export const typographyStyle = makeStyles((theme: Theme) => createStyles({
defaultFontStyle: {
I then updated the imports to the following:
import {
defaultFont,
primaryColor,
infoColor,
successColor,
warningColor,
dangerColor,
grayColor,
} from "../material-kit-pro-react";
import { makeStyles, Theme } from "#mui/material/styles";
import { createStyles } from '#mui/styles';
export const typographyStyle = makeStyles((theme: Theme) => createStyles({
This uses the #mui imports, but in my actual class I get the following error:
const typographyStyle: never
import typographyStyle
This expression is not callable.
Type 'never' has no call signatures.
My component is pretty basic and it looks like this:
import React from "react";
import { typographyStyle } from "assets/jss/material/typography/typographyStyle";
export interface TypographyProps {
children?: React.ReactNode;
}
export function Danger(props: TypographyProps) {
const classes = typographyStyle();
const { children } = props;
return (
<div className={classes.defaultFontStyle + " " + classes.dangerText}>
{children}
</div>
);
}
The error comes from const classes = typographyStyle();
That´s occuring because makeStyles import has been moved to #mui/styles, so your import must be:
import { Theme } from "#mui/material/styles";
import { createStyles, makeStyles } from "#mui/styles";
Also, according to MUI documentation:
#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 anymore, deprecated in v5. If you don't want to have both emotion & JSS in your bundle, please refer to the #mui/system documentation which is the recommended alternative.
And
We have replaced JSS with emotion as a default styling solution while adding support for styled-components at the same time. We recommend migration your customization from JSS/makeStyles/withStyles to the new APIs: styled and the sx prop
So, with MUI v5 you should probably go with sx or styled instead makestyles. You can take a better look here and here.

TypeError: Object(...) is not a function in React when importing JSS file using material UI

I am trying to import my jss file to React component (.jsx) and I have this error :
I looked through related questions and I tried all solutions, mostly about updating versions of material-ui. Here is my package.json file:
the way I write jss file :
import { makeStyles } from '#material-ui/styles';
const useStyles = makeStyles((theme) => ({
root:
{
margin: '10px'
}
}));
export default useStyles;
And jsx file :
import React from 'react';
import DateBar from './DateBar';
import Grid from '#material-ui/core/Grid';
import useStyles from './Board.jss';
export default function Board()
{
const classes = useStyles();
return(
...
Am I missing something or Do I need additional packages for using jsx and jss in React?
I have been trying all the solutions but didn't work..
Note: When I put the code inside of Jss into Jsx file, code works fine. Importing/Exporting might be an issue..
Edit: Still couldn't fix even though I created a new app and installed dependancies from the beginning..

What exactly is makeStyles in material-ui? [duplicate]

This question already has answers here:
Internal implementation of "makeStyles" in React Material-UI?
(2 answers)
Closed 1 year ago.
I just started learning React material-ui and I found this makeStyles function, and they said it returns a Hook.
I remember from React hooks that a custom hook is made by wrapping a built-in hook. I tried looking inside makeStyles, and it has some interoperability and some css-in-javascript pattern.
I am really fed up with rules coming over and over again. For now can someone please tell me what is this makeStyle function and perhaps suggest a better approach to reading about material-ui.
Thank you good people of Stack Overflow.
If you are familiar with the older version of Material-UI, you might have used withStyles, to use your custom styles in MUI components.
withStyles is just a HOC(Higher Order Component), used as a wrapper, to assign the classes prop to your component. You can furthur use the classes object to assign specific classes to your DOM or MUI elements in your component.
makeStyles is just a successor, which returns a hook(to access the custom classes). Now this is only a modern-react way of doing things in order to avoid HOCs.
MUI v3.9.3
import { withStyles } from '#material-ui/core/styles';
const styles = {
root: {
backgroundColor: 'red'
},
};
class MyComponent extends React.Component {
render () {
return <div className={this.props.classes.root} />;
}
}
export default withStyles(styles)(MyComponent);
MUI v4.9.5
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles({
root: {
backgroundColor: 'red'
},
});
export default function MyComponent(props) {
const classes = useStyles(props);
return <div className={classes.root} />;
}

Material-UI injectFirst doesn't work with storybook

I'm using material-UI with styled-components and according to documentation, in order to override material styles it's required to add this injectFirst attribute:
however when trying to use this approach inside storybook environment it does not work as expected and the JSS styles are still injected after styled-components.
.storybook/config.js:
import React from 'react'
import {configure, addDecorator} from '#storybook/react'
import { StylesProvider } from '#material-ui/styles'
addDecorator(storyFn => (
<StylesProvider injectFirst>
{ storyFn() }
</StylesProvider>
));
const req = require.context('../packages', true, /.story.js$/);
function loadStories() {
req.keys().forEach((filename) => req(filename));
}
configure(loadStories, module);
DOM:
styled-components style attribute is still before JSS
I was not using styled-components, but for MUI + CSS Modules with Storybook v6 the following configuration made it so MUI styles were not overriding our own styles.
.storybook/preview.js:
import { StylesProvider } from '#material-ui/styles'
export const decorators = [
(Story) => (
<StylesProvider injectFirst>
{Story()}
</StylesProvider>
),
]
We had exiting config for parameters in that file from another add-on and I just put the above code in there with it no problem. You may also need to import React in there too depending on how you have things setup (we did not).

I'm getting error after upgrading to Material UI 4 - withStyles

I'm getting the following error after upgrading to MUI v4.0.2 from v3.9.x:
You must pass a component to the function returned by connect. Instead received {"propTypes":{},"displayName":"WithStyles(MyComponent)","options":{"defaultTheme":{"breakpoints":{"keys":["xs","sm","md","lg","xl"],"values":
...
MyComponent:
import { withStyles } from '#material-ui/core/styles'
const getStyles = theme => ({
fooBar: {
...
},
})
...
export default withStyles(getStyles)(MyComponent)
MyContainer:
import { connect } from 'react-redux'
import MyComponent from './MyComponent'
...
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)
How to migrate withStyles?
Version 5.0.7 and earlier of react-redux performed the following validation on the component passed to connect:
https://github.com/reduxjs/react-redux/blob/v5.0.7/src/components/connectAdvanced.js#L91
invariant(
typeof WrappedComponent == 'function',
`You must pass a component to the function returned by ` +
`${methodName}. Instead received ${JSON.stringify(WrappedComponent)}`
)
With the introduction of React.forwardRef (which is used heavily in Material-UI v4) and other features introduced in React 16.8 (hooks), it is possible to have a component type that is not a function.
More recent versions of react-redux instead use isValidElementType from the react-is package. This correctly recognizes the component types returned by forwardRef and other methods.
I believe versions 5.1 and later of react-redux should all work fine without erroneously causing the error mentioned in the question.
This is how I do it:
import { withStyles } from '#material-ui/core/styles';
Define your styles object: look at the material-ui examples for guidance
const styles => ({
root: {
display: 'flex',
}
});
Then export the component using your styles:
export default withStyles(styles)(YourComponent);

Resources