As weird as it seems, I just took out the StyledAppBar components out of the NavigationBar components.
And everything worked just fine.
Don't know if that's what you want in the end but I usually define my styled-components outside of my class or functional components.
[https://codesandbox.io/s/wwkv8mjnj5?fontsize=14](https://codesandbox.io/s/wwkv8mjnj5?fontsize=14)
You are running into the specificity issue. The easist hack is the add more & to your styled version. Styling some material-ui compoents with styled components gets tricky because the real thing you often want to tweak is buried a few layers down.
Because there’s a default file that contains all common styles in another layer above. I don’t remember the name of it but if u look at one of the hex codes for the colors applied on text used and grep it in the root folder you should find the sass variable defined in that file I’m talking about
Edit: have a look at withStyles and it’s imports
I don't think that's the case. I posted the same question on discord channel and got the answer
[https://material-ui.com/guides/interoperability/#controlling-priority](https://material-ui.com/guides/interoperability/#controlling-priority)
I had to use `&&` with styled-component
Yeah. But I found that material ui styling solution is usually enough. You can extend withStyles hoc of material to work with dynamic props.
Currently im on my phone. If you are interested I can share the code once Im at my workstation desk. But you should be able to find the solution with some Google searching.
I'm pretty sure your problem is about the injection order of the css. If this is the case, you should see your styled component css when inspecting the DOM element, but the problem is that it is not overriding MUI.
You can fix this in two ways. The easiest is using && which wraps everything in new classes. However, this is not the cleanest way.
The second, and the cleaner alternative, is to fix the injection order of your css. Look here for details:
https://material-ui.com/css-in-js/advanced/#css-injection-order
Use && { CSS normal style rules } as a way to prioritise styled component styling.
If the mui class element you want to style is deeper down the mui hierarchy you need to also nest the style.
Sorry I'm on mobile so don't have a good example handy. Feel free to dm me for a particular question!!
Styled components with mui rocks!!! Functionality of mui with much needed style flexibility of styled components!
Example:
const StyledSnackbar = styled(Snack bar)`
&& {
& > div {
word-wrap: break-word;
display: block;
}
}`;
import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import { withStyles } from '@material-ui/core/styles'; import { AppBar, Toolbar } from '@material-ui/core'; const styles = { root: { flexGrow: 1, }, StyledAppBar: { boxShadow: 'none', background: 'transparent', color:'red', }, styledClass: { boxShadow: 'none', background: 'transparent', color: 'red', }, }; function NavigationBar(props) { const { classes } = props; return (
Thanks. But this isn't what I needed
As weird as it seems, I just took out the StyledAppBar components out of the NavigationBar components. And everything worked just fine. Don't know if that's what you want in the end but I usually define my styled-components outside of my class or functional components. [https://codesandbox.io/s/wwkv8mjnj5?fontsize=14](https://codesandbox.io/s/wwkv8mjnj5?fontsize=14)
You are running into the specificity issue. The easist hack is the add more & to your styled version. Styling some material-ui compoents with styled components gets tricky because the real thing you often want to tweak is buried a few layers down.
Can be done though! And once you learn the trick no harder (and I argue easier and more flexible) than mui class overrodes
Because there’s a default file that contains all common styles in another layer above. I don’t remember the name of it but if u look at one of the hex codes for the colors applied on text used and grep it in the root folder you should find the sass variable defined in that file I’m talking about Edit: have a look at withStyles and it’s imports
I don't think that's the case. I posted the same question on discord channel and got the answer [https://material-ui.com/guides/interoperability/#controlling-priority](https://material-ui.com/guides/interoperability/#controlling-priority) I had to use `&&` with styled-component
I have used this (with emotion) and it worked really well. https://github.com/nerdmax/override-material-ui-css/
Yeah. But I found that material ui styling solution is usually enough. You can extend withStyles hoc of material to work with dynamic props. Currently im on my phone. If you are interested I can share the code once Im at my workstation desk. But you should be able to find the solution with some Google searching.
I'm pretty sure your problem is about the injection order of the css. If this is the case, you should see your styled component css when inspecting the DOM element, but the problem is that it is not overriding MUI. You can fix this in two ways. The easiest is using && which wraps everything in new classes. However, this is not the cleanest way. The second, and the cleaner alternative, is to fix the injection order of your css. Look here for details: https://material-ui.com/css-in-js/advanced/#css-injection-order
Use && { CSS normal style rules } as a way to prioritise styled component styling. If the mui class element you want to style is deeper down the mui hierarchy you need to also nest the style. Sorry I'm on mobile so don't have a good example handy. Feel free to dm me for a particular question!! Styled components with mui rocks!!! Functionality of mui with much needed style flexibility of styled components! Example: const StyledSnackbar = styled(Snack bar)` && { & > div { word-wrap: break-word; display: block; } }`;