Container

The Container component is used to center and constrain the content horizontally. It adapts to the current breakpoint, offering responsive layout control.

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        html.Div([
            dmc.Container(
                maxWidth="sm",
                children=[
                    dmc.Box(sx={"width": "100%", "height": "100px", "backgroundColor": "primary.main"})
                ]
            )
        ])
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Props Table

Below are the main props available for the Container component.

Prop	Type	Default	Description
maxWidth	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| false	'lg'	The maximum width of the container.
disableGutters	boolean	false	If true, disables the left and right padding.
fixed	boolean	false	If true, sets the container to a fixed width.
sx	object		CSS-in-JS styling for the container.

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI Container Documentation

Props Table​

Props Table