Enforce specific breakpoint on Component Level

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

This issue proposes adding a new feature to the project that would allow us to override the default breakpoint for a specific component. Currently, the project uses a set of breakpoints to determine the layout and responsiveness of components, but there are cases where a we need to use a different breakpoint for a specific component. This feature would give us more flexibility and control over the design of their components.

Examples 🌈

export const GridExample: FC<{ breakpoint: Breakpoint }> = ({ breakpoint }) => {  // assume breakpoint=sm
        // grid should use "sm" breakpoint even if the screen is "xl"
	<Grid
		container
                breakpoint={breakpoint}
		columns={{
			sx: 4,
			sm: 8,
			md: 12,
			lg: 10,
			xl: 10,
		}}
	>
		<Grid item width={1} xs={4} sm={8} md={6} lg={4} xl={4}>
			<p>...</p>
		</Grid>
	</Grid>;
};

Motivation 🔦

Currently, the Grid selects the breakpoint based on screen size, but this approach has its limitations. Implementing the suggested feature would increase the flexibility of the Grid.

Ideas

There are alternative approaches to the suggested feature, such as creating a Container component that extends the current theme object and enforces a specific breakpoint for its child components. This could be achieved by passing the desired breakpoint as a prop to the Container, which would then apply the breakpoint to all of its child components. This approach could offer greater flexibility in terms of controlling the layout and responsiveness of components, and may be a useful alternative to implementing a feature that allows for overriding the default breakpoint at the component level.