Container
Overview
Container is a software package containing all the necessary elements to run in any environment. Container Component is used to contain the content inside of it. Having received support from Container, we can develop our website responsively.
Please refer to this for more information: https://mui.com/material-ui/react-container/#main-content.
Import
import { Container } from '@mui/material';
The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.
Property
Property:
Name | Default | Description |
Id-name | Placeholder: <id-name> | The Id-name of the created component. |
State | State: Normal | The State of the created Component. |
Margin and Padding | Size Unit: Px | The component Margin and Padding with many selectable Size Units. |
Size | Size Unit: Px | The component Size includes Width and Height with many selectable Size Units. |
Layout | Position: None Size Unit: Px | The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units. |
Text | Font-family: None Font-weight: Normal Text-align: Left Size Unit: Px | The component Text includes Text, Font-family, Font-size, Font-weight, Font-color, Text-align. |
General | Visibility: none Opacity: 100% | The component General includes Visibility, Opacity, and Background. |
Advanced Style | The component Advanced Style includes Classname and Inline Style addition. |
Code Sample:
<Container maxWidth="sm">
<Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
</Container>