Currently, I am in the process of developing a component using material-ui withStylers and defaultProps. However, I have encountered an issue where the props of the component are not being retrieved in the styles objects unless they are explicitly passed to the component.
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core";
const styles = theme => ({
ClassTest: {
anyAttr: props => console.log(props)
}
});
const Test = ({classes}) => {
return (
<span className={classes.ClassTest}/>
);
};
Test.defaultProps = {
val2: "hey"
};
Test.propTypes = {
val1: PropTypes.bool.isRequired,
val2: PropTypes.string,
};
export default withStyles(styles, { withTheme: true })(Test);
To use this component, you can do so like this:
<Test val1="Hello">
Expected output in console log:
{
classes: {...},
val1: "Hello",
val2: "hey"
}
However, the actual output is missing the defaultValue for 'val2':
{
classes: {...},
val1: "Hello"
}
If you call the component as follows:
<Test val1="Hello" val2="hey">
The output will correctly display both values:
{
classes: {...},
val1: "Hello",
val2: "hey"
}
Shouldn't the styles object automatically retrieve the defaultValue from defaultProps? Am I missing something here?
This development is based on the following versions:
"@material-ui/core": "^4.3.0",
"react": "^16.8.6",
Here is the relevant part of the documentation that I'm referring to:
https://material-ui.com/styles/basics/#adapting-based-on-props