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
Related
How do I make #mui/system aware of my theme settings?
When using Stack's sx prop, theme is defined in createTheme.d.ts, but there doesn't seem to be a way to extend or provide overrides.
As a workaround, I'm using styled to extend Stack with my theme values.
As #Camilo stated, use import {Stack} from "#mui/material" instead of from #mui/system.
I am not sure what the correct approach here is. Is it ok if I create styles with makeStyles per component or should I create one in the base component and pass down class names?
it is better to create the styles in their respective components. It'll be more manageable as all the styles don't sit in one place and will not become a huge file. Also passing down styles for each component from their parent component will create the issue of prop-drilling.
If you've some general common styles then add them to the theme file which will be more maintainable and easy to debug.
Another way to manage common styles to create makeStyles hook of common styles in a separate file and then import that hook and use it in the component wherever needed instead of passing through the prop.
I would like my React Data Table to have Material Ui classes so it can work better with the rest of my App. It was mentioned in the docs that you can override the css with styled components but I have not managed to do that nor found an example.
i would like to add Mui class names to the rtd class names for example:
<div class="rdt_TableCell"/>
should be
<div class="rdt_TableCell MuiTableCell"/>
link to mentioned feature:
https://www.npmjs.com/package/react-data-table-component#css-overrides
some basic sandbox to play around with:
https://codesandbox.io/s/react-data-table-materialui-9iebe
The react-data-table-component library does not currently provide any way to customize a cell's classname. When it refers to overriding CSS using styled-components, it means an approach like the following:
const StyledDataTable = styled(DataTable)`
& .rdt_TableCell {
background-color: lightblue;
}
`;
This lets you customize the CSS properties associated with the rdt_TableCell class, but doesn't give you any easy way to leverage the Material-UI TableCell styles except by copying them.
We are using styled-components in the project and we are wondering if there is a way to have a full styling capability of react-select V2. I mean it's certainly possible to use objects to define styling, but it feels rather inconsistent and makes a bit worse DX.
From my understanding, the styled-components work by creating generated className and attaching to elements. That would essentially mean I would have to use components prop anytime I need to eg. change text color. I cannot use styles if I want to avoid object CSS-in-JS. Is that correct?
Simply put, if the component you want to style with styled-components accepts a className property, it can be styled with it using the styled(Component) syntax.
I see react-select accepts className for every component, so it should work fine.
ex:
import Select from 'react-select';
import styled from 'styled-components';
styled(Select)`
background-color: red;
font-size: 20px;
`;
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?