Please enable JavaScript.
Coggle requires JavaScript to display documents.
material UI - Coggle Diagram
material UI
theme
theme is like context where we have all colors and mediaquery that we use to customize the component .
we can add some class in theme and them use that class later
how to customize the component
using sx
so we use sx props to customize react component. inside sx we can use values from theme context
using ampersant (&)
"&:not(:disabled)" :
"&>p"
selecting child paragraph
"& p,h2"
selecting all child paragraph and h2
ampersant summery
&. -> select component class
& .child-class .nested child-class -> select child class of child .
& . -> select child class
responsive
sm for small and xs for extra small example : color { sm : black , xs : blue }
override component styles
1️⃣ using global classes : u can see global class in doc of material UI for a component
using component class object we can select class or directly both use ampersant .
2️⃣ using stylesOverrides property in custom theme
we can use theme data to set css properties .
sx = { { color : (theme) => theme.typography.h1.color } }
you can add CSS conditionally by useState react
sx = { { color : flag ? white : black } }
you can create a reusable component
example : const customButton = styled(Button) ( { color : red } )
we can not use styles just like we use in sx for creating custom button here we use theme.unstable_sx
example : const customButton = styled(Button) ( ( {theme}) => theme.unstable_sx({ color : theme.palatte.primary.main}) )
const customButton = styled(Button) ((props) => ({ color : props.color } ))
const customButton = styled(Button) ( ( {theme , ...allother}) => theme.unstable_sx({ color : allother.size = 'small' ? "red" : "green" }) )
what is it
it is ready to use react component library