In the ground since Tue Oct 01 2024
Last watered inTue Oct 01 2024
Mui - Material UI
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda officiis adipisci veniam earum nihil cumque fugiat reiciendis nam maiores doloremque, voluptatum quisquam eveniet vel itaque libero amet sit. Nihil, aperiam.
Building Blocks
Box
It starts as a
with no styling. We can start customizing it by:
1<Box component="section">This Box renders as an HTML section element.</Box>
1<Box sx={{ p: 2, border: "1px dashed grey" }}>
2 This Box renders as an HTML section element.
3</Box>
Container
By default it gives us a centralized
with:
1width: 100%;
2margin-left: auto;
3box-sizing: border-box;
4margin-right: auto;
5display: block;
6padding-left: 16px;
7padding-right: 16px;
The padding values are the ones fromt App's theme
Misc
Access theme data from a React Component / Hook
1import { useTheme } from "@mui/system";
2
3
4const Comp = () => {
5 const theme = useTheme();
6 ...
7}
Customization
Button
Targeting Breakpoints
1 <AppButton
2 sx={{
3 position: "fiex",
4 top: { all: 22, tablet: 100 },
5 right: { all: 15, tablet: 40 },
6 display: { all: "flex", tablet: "none" },
7 color: "teal.500",
8 placeItems: "center",
9 gap: 0.5,
10 }}
11 onClick={handleBack}
12 >
13 <AppIcon name="ChevronLeft" size="extra-small" />
14 <Typography variant="tag" color="neutral.100" textTransform="uppercase">
15 back
16 </Typography>
17 </AppButton>
18 );
Checklist
[] Create a Themed Component (e.g. Styled Component)
[] Simple, more CSS than logic
[] Provides a way to target breakpoints