3 ms·
If you end up giving React, Material UI and JSS a chance, there are some things you can do to make it more palatable. 1. Put all of your calls to makeStyles in
by wayneftw 6y ago
If you end up giving React, Material UI and JSS a chance, there are some things you can do to make it more palatable.
1. Put all of your calls to makeStyles in a separate file called MyComponent.styles.js right next to your component and export the resulting useStyles function(s).
2. Learn the power of the themes system. Make a themes/defaultTheme.js file where you export the result of createMuiTheme(and modify all MUI components here as well as add your own variables and functions that can be used in any of your .styles.js files).
3. Wrap your app component with a ThemeProvider passing your theme={defaultTheme}. These can also be nested so you can have different themes for different area of your component tree.
4. In your style.js files, use theme variables or functions as part of your styles. Also try creating functional CSS selectors, which are functions that can use whatever props that you've passed into your classes = useStyles(props); call and return a dynamic style based on those props.
It's actually quite powerful. The closest you can get to this level of encapsulation, flexibility and dynamic theming with non-JS CSS is CSS Modules and CSS Variables, which you can read about here - https://itnext.io/css-variables-dynamic-app-themes-86c0db61cbbb https://itnext.io/css-variables-dynamic-app-themes-86c0db61c...
However, Material UI is not going to help you very much with that type of styling. That kit works best with JSS. They do provide some integration points with normal CSS, CSS Modules or any other type of styling but the easy path with MUI is to just embrace JSS. After working with it for a while, I prefer it.
I don't understand the complaint that you had to spend a half hour looking into how to do something with a framework that is new to you. That's the job. If they just gave you the basic React styling capability, Material UI wouldn't be as popular as it is. Providing multiple integration points for multiple dynamic styling/theming systems for an entire framework of related UI elements is not easy and their documentation on what they've done here is quite straightforward. Give it a chance, experiment, learn some basic principles and you'll see how powerful it is compared to doing straight CSS or SCSS.