There are some custom components which wrap more than one element, but allow you to style them individually with multiple style-like attributes.
For example in react-native-elements there's Button: https://react-native-training.github.io/react-native-elements/docs/button.html
The above can accept buttonStyle and containerStyle.
As far as I know, styled-components decorate your component with style. How do I make it target an attribute I'd give it e.g. buttonStyle or containerStyle?
Related
I want to style my custom React/MUI components by default, but still have the parent MUI ThemeProvider be able to override my styles.
For example, let's say that I have a Button that is green by default (styled in my code), but it should be able to have the colour overridden by a default theme passed down via ThemeProvider.
I can't seem to find anyway to do it as any styling I apply in my component becomes the default as it's the last in the CSS/styling tree.
I couldn't find much information in the documention or github issues about that topic — I can just tell you how to cope with the situation and how it works currently in v5.
It seems like the priority is as follows:
sx > styled() > theme
ie. sx has the highest priority.
At first it seems quite strange that you cannot overwrite something with your theme, but on the other hand you'd also like to be able to overwrite the theme with sx occasionally. So to me the priority makes sense.
You should not use !important in the theme if possible, because it prevents sx and styled() from doing its job.
What you'd do is ship reusable components unstyled (no styled() or sx) and style them via the theme.
Perform the colorization in the theme. Width, height, margins and paddings you can also define via styled() and/or sx if you don't need to change those in the theme.
I am using the particles component from react-tsparticles and it takes in a props called styles and canvasClassName - where you can give it a class name (and not an object of styles).
I can use the makestyles to create a style class that I can pass to the canvasClassName however that is deprecated so what is the alternative for v5?
I need to use the theme values from mui so putting the styles into a .module.css file isnt an option
Does anyone know if this is at all possible. It appears that the only way I have of styling the svg elements appears to be an inline style attribute, passing the style as an object.
In the Office Fabric UI documentation every component has two interfaces, for example
https://developer.microsoft.com/en-us/fabric#/components/nav
has
INavStyleProps interface
and
INavStyles interface
a component implementing INavStyleProps can take in any of the listed props to customize style, for example
I am wondering if there is any way to interact with INavStyles classes exposed through the documentation; essentially what does implementing the INavStyles interface guarantee to the consumer of the component, other than the listed classes and styles are implemented. Is there a way to override, customize, or otherwise interact with the classes exposed through this interface similar to how we can use props to interact with components implementing INavStylesProps.
Here is link showing the use of both interfaces for Nav. It's a how we give to Nav the default styles.
In order to override the default styles for any INavStyles area, you can use the styles prop and pass to it a styleFunctionOrObject. As you can see from the first link provided, INavStyleProps are used to pass some values to be used in the styling of the parts of the Nav or booleans to have some conditional styling. Also, that is how we pass the theme to the styles.
A style function you can pass to styles prop would look exactly as the one we use to provide the default styles minus the getGloballClassNames. Also if you want to style just one area the return type should be Partial<INavStyles> as all areas are required and it will complain if you don't provides styles for all of them.
Let me know if this cleared the confusion on how to make use of both interfaces.
GridTile apply specofic styles to image in children prop. But when i use preload wrapper styles are not allpy here's why
So can i pass GridTile styles to wrapped image without overriding?
As far as I see in the code here, styles are merged:
style: prepareStyles(Object.assign({}, styles.childImg, child.props.style))
but there are IF statements above that, so you need to fulfil those conditions as well:
there must be only one child
this child must be an <img ... />