[pigment-css][docs] Docs suggestions about material-ui HOT 4 CLOSED

@joshwcomeau Thanks for the feedback, really appreciate it. Both are great suggestions, I added this to the backlog. cc @samuelsycamore for more opinions.

from material-ui.

One of the things I also had doubts about is how to set defaultProps on components created from styled, as well as the use of the "name" and "slot" attributes. (typescript) 🤔

To define defaultProps, use the theme. It's very similar to https://mui.com/material-ui/customization/creating-themed-components/ with the change of import from @mui/material/styles to @pigment-css/react.

Note: the API is meant for building a themable UI library, not local components.

from material-ui.

One of the things I also had doubts about is how to set defaultProps on components created from styled, as well as the use of the "name" and "slot" attributes. (typescript) 🤔

Ex: Where would the configurations be in defaultProps, in the component, or in the theme?

import { styled } from "@pigment-css/react";

interface FlexProps {
  vertical?: boolean;
}

export const Flex = styled("div", {
  name: "Flex",
  slot: "Root",
})<FlexProps>(() => {
  return {
    display: "flex",
    variants: [
      {
        props: { vertical: true },
        style: {
          flexDirection: "column",
          paddingBlock: "1rem",
        },
      },
      {
        props: { vertical: false },
        style: {
          paddingInline: "1rem",
        },
      },
    ],
  };
});

@danilo-leal @siriwatknp

from material-ui.

To define defaultProps, use the theme. It's very similar to https://mui.com/material-ui/customization/creating-themed-components/ with the change of import from @mui/material/styles to @pigment-css/react.

Note: the API is meant for building a themable UI library, not local components.

Would it be possible to create an example on https://github.com/mui/material-ui/tree/master/examples?

I'm having trouble figuring out how to do it properly. If possible, could you create a simple example of building a library using it? It could be just an example with a button. 🙏

It would be very enriching. Thank you in advance.

from material-ui.