A major benefit being omitted here is that Box is built on styled-system, so for responsive needs you can pass arrays for a variety of its props to talk to different breakpoints. such as width={[ 1, 1/3, 1/2, 1/4]}. or p={[1, 2, 3, 4]} or flexDirection={['column', 'row']} where the first index value in the array is the breakpoint for mobile, the second is for tablets, third is for small desktop, and fourth is large desktop. The breakpoints array is set in the material ui theme automatically supporting these, but you can also customize the breakpoints in your mui configuration.