Box
The Box component is a versatile, theme-aware container in Sistent, ideal for styling and layout customization. It supports the sx prop for easy, responsive styling and can render as any HTML element.
The Box component is a flexible and foundational container in Sistent, designed to structure and style content. It provides quick access to the theme and CSS utilities, allowing for easy customization and responsive design. Using the sx prop, developers can apply CSS styles directly with theme-aware properties, making Box ideal for layouts, spacing, and other UI adjustments. It can render as any HTML element using the component prop, offering high versatility in both structure and styling.
Usage
The Box component differs from other containers available in Sistent in that its usage is intended to be multipurpose and open-ended, just like a `div`. Components like Container, Stack and Paper, by contrast, feature usage-specific props that make them ideal for certain use cases: Container for main layout orientation, Stack for one-dimensional layouts, and Paper for elevated surfaces.
Box component
The Box component renders as a `div` by default, but you can swap in any other valid HTML tag or React component using the component prop. The demo below replaces the `div`with a `section` element:
Customization
The Box component can be styled flexibly with Sistentsxprop and custom themes. The sx prop allows quick application of CSS styles that are theme-aware, enabling responsive and consistent design.
Using the sx Prop
The sx prop supports a wide range of style properties, including colors, spacing, and responsive adjustments. It directly accesses theme values, allowing you to apply theme-based styles to a Box with minimal code.
