CODEWITHSUNDEEP
reactjsmaterial-uimaterial-designthemes
Jhonatan
Jhonatan

Reputation: 1361

Where is defined the default material-ui spacing?

I've realized the default spacing for material-ui themes is 8px. theme.spacing(1) is equal to 8px. theme.spacing(2) is equal to 16px, and so on. I know spacing works in a overriding way, so it's possible to write <Box m={4} /> or theme = {spacing: 4}. However, I'm interested in knowing where it was defined that the spacing is 8px by default.

Note: The default theme here DefaultTheme doesn't have a defined spacing, I couldn't find it in the material-ui repo either

Upvotes: 1

Views: 561

Answers (2)

Spatz
Spatz

Reputation: 20168

Default theme defines spacing as result of createSpacing function:

function createMuiTheme(options = {}) {
  const {
    // ...
    spacing: spacingInput,
    // ...
  } = options;

  // ...
  const spacing = createSpacing(spacingInput);
  // ...
}

Here is definition of createSpacing function.

export default function createSpacing(spacingInput = 8) {
  // ...
  const spacing = (...args) => {
  // ...
  }
  // ...
  return spacing
}

Upvotes: 3

Vencovsky
Vencovsky

Reputation: 31713

Where it's defined?

Somewhere in the code but I'm not sure if pointing out where in the code makes any difference, maybe you want to know...

Why it's 8px?

It's a standard of Material's Design

How to change it?

You can see it in the docs.

Upvotes: 0

Related Questions