How to warp some component with rectangle box in ReactJs?

Question

I want something like this Here is the example!

I try with the material UI box, but it's not rendering the box only rendering the text.

Here is the code:

import * as React from 'react';
import Box from '@mui/material/Box';

export default function BreakpointsAsArray() {
  return (
    <div>
      <Box sx={{ width: [100, 200, 300] }}>This box has a responsive width.</Box>
    </div>
  );
}

score 0 · Accepted Answer · answered Sep 21 '21 at 15:43

Material UI's Box name is quite deceptive and it doesn't mean a rectangle box will automatically be created in the rendered HTML. Here is some good explanation of the box component. You still need to add css/styling to make it according to your choice. The rectangle box you see in your shared image, is actually added (through some website code) to the better distinguish between the documentation text and the code snippet output. Anyhow, I forked the codesandbox example and added some custom styling to show, how the styling can be updated. You can use the sx prop to add any styles you needed. here is a little example.

sx={{
  width: "90%",
  padding: "24px 20px", // theme padding
  border: "1px solid rgba(0, 0, 0, 0.12)",
  borderRadius: 4
}}

How to warp some component with rectangle box in ReactJs?

1 Answers1