Reputation: 1361
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
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
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