Material-UI Sizing Confusion

Question

In the sizing documentation, it says "Easily make an element as wide or as tall (relative to its parent) with the width and height utilities.".

What I realize is that almost all the examples in system section of documentation, examples mostly related to Box component. I tried some of the tricks from there on Button element. And expectedly nothing changed.

Answer 1

Well for those who is new on material (actually UI) this is a bit tricky. first, they use Box because as per box documentation they said box generated using material styled (not the styled-components) "The Box component packages all the style functions that are exposed in @material-ui/system. It's created using the styled() function of @material-ui/core/styles."

So, I went to the github and material core repository to understand how to do that.

export const styleFunction = css(
  compose(
    borders,
    display,
    flexbox,
    grid,
    positions,
    palette,
    shadows,
    sizing,
    spacing,
    typography,
  ),
);

css and compose are also exported from @material-ui/system

then at the end of the file;

const Box = styled(BoxRoot, { shouldForwardProp }, { muiName: 'MuiBox' })(styleFunction);

export default Box;

The styled used here is from an experimentalStyled package (an internal package) but that does not matter. Cuz, Material guys exporting a styled function/hook for our use.

import { styled } from "@material-ui/core/styles";

I tried this styled function for Button component.

const CustomButton = styled(Button)(sizing);

adn yes it worked. I am now able to apply magical styling skills defined in the system section of material UI.

For those who wants to use this instead of other methods. I pushed an npm package too.

material-ui-styled-hook