mui

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:

changing the html tag

1<Box component="section">This Box renders as an HTML section element.</Box>

adding custom css

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

mui

Related Topics