The Width of Material UI Divider

Question

The Width of Material UI Divider

Currently seeking a method to increase the line thickness of the Material UI Divider, whether by stretching horizontal lines vertically or stretching vertical lines horizontally.

I have reviewed the documentation for Material UI v5 on https://mui.com/material-ui/api/divider/.

Despite checking the API, there does not seem to be an attribute available to adjust the Divider's "Thickness."

Various attempts with inline styles specific to Material UI v5 have been made:

<Divider sx={{height:"15px", fontSize:"50px", width:"50px", fontWeight:"bold", padding:"15px"}}/>

Regrettably, none of these attributes have successfully altered the "thickness" of the line.

In search of a solution tailored to the Material UI v5 Divider component specifically. Preferably without resorting to creating a Box component and applying inline sx attributes or custom classes to said Box component.

Any suggestions or ideas are greatly appreciated!

css material-ui attributes styling divider

Answer 1

Answer №1

To adjust the thickness of the divider, you can modify the CSS property border-bottom-width:

<Divider sx={{ borderBottomWidth: 5 }} />

If you need a vertical divider, use the following code:

<Divider orientation="vertical" flexItem sx={{ borderRightWidth: 5 }} />

You can also customize the thickness of the divider using styled():

const StyledDivider = styled(Divider)(({ thickness, orientation }) => ({
  ...(thickness !== undefined &&
    (orientation === "vertical"
      ? { borderRightWidth: thickness }
      : { borderBottomWidth: thickness }))
}));

<StyledDivider thickness={10} />

<StyledDivider orientation="vertical" flexItem thickness={10} />

https://codesandbox.io/s/69682476-mui-material-ui-divider-thickness-s41mn?file=/demo.js

Answer 2

To adjust the thickness of the divider, you can modify the CSS property border-bottom-width:

<Divider sx={{ borderBottomWidth: 5 }} />

If you need a vertical divider, use the following code:

<Divider orientation="vertical" flexItem sx={{ borderRightWidth: 5 }} />

You can also customize the thickness of the divider using styled():

const StyledDivider = styled(Divider)(({ thickness, orientation }) => ({
  ...(thickness !== undefined &&
    (orientation === "vertical"
      ? { borderRightWidth: thickness }
      : { borderBottomWidth: thickness }))
}));

<StyledDivider thickness={10} />

<StyledDivider orientation="vertical" flexItem thickness={10} />

https://codesandbox.io/s/69682476-mui-material-ui-divider-thickness-s41mn?file=/demo.js

Answer 3

Answer №2

Now that's one hefty lad

<Separator styling={{ borderBottomWidth: '45px' }} />

Answer 4

Now that's one hefty lad

<Separator styling={{ borderBottomWidth: '45px' }} />

The Width of Material UI Divider

Answer №1

Answer №2

Similar questions

Guide to automating the versioning of static assets (css, js, images) in a Java-based web application

Acquire row data when checkbox is selected in MUI X Data Grid

What could be the reason behind the malfunctioning of my media query in the

While iterating through the material-ui rating component, the 'index' value remains constant at 0 within the 'onChange' function

When using Material-UI's <Table/> component, an error is thrown stating that the element type is invalid

Creating Awesome Icons in Kendo Grid with Code In this tutorial, we will learn how to programm

Tips for setting discrete mapper style in cytoscapejs?

Tips for creating a dynamic variable for an object key in jQuery to streamline your code

Maximizing the Efficiency of Imports in ReactJS

Difficulty Clicking Links with CSS 3D Transformation

Enhance the bubble charts in Kendo UI Graph by adding dimension and depth to the bubbles for a more visually

The Microsoft Booking feature is not being shown in the iframe

Aligning a block of text containing two varying font sizes in the center

Conceal a particular object from view by selecting it from the menu

How can we target every nth child element universally?

Populate two MUI-Autocomplete fields by selecting one item

Displaying and concealing a component using onClick in React with Material UI

Display validation messages when the user either clicks out of the textbox or finishes typing

The challenge of navigating CSS specificity guidelines

HTML input field's placeholder text is truncated at the end