Material-UI Sizing Confusion - material-ui

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