---

[enyelsequeira]

Hello all,

so recently I have been thinking of building on top of Material UI, however I am wondering if anyone can give me advice or if anyone has done the following.

I have a turborepo setup and within in there I have a packages => UI that will use MUI Components, now what I want to do is change and add extra styles based on props defined by me on the code something like below

import * as React from 'react';
import { Button, ButtonProps } from '@mui/material';

interface ButtonOwnOptions {
  tailwindColor: 'red' | 'green' | 'blue' | 'yellow';
}
const MaterialBTN = <C extends React.ElementType>(
  props: ButtonProps<C, { component?: C }> & ButtonOwnOptions
) => {
  const { children, tailwindColor, ...rest } = props;

  return <Button {...rest}>{children}</Button>;
};

export default MaterialBTN;

then ideally what I want to do is being able to pass the color to handle the correct className color for the button so something like below

   <MaterialBTN tailwindColor={"red"}>
        BUTTON MATERIALSA
    </MaterialBTN>

issue with this one I don't get the correct typings that should pass through

and 2 it does not add the styles accordingly, I can simply just add the className props, but thats not really what I want. I want to abstract the logic of css in the component library UI and not in the webapp

any thoughts or ideas would be appreciated
cheers

[oliviertassinari]

I'm locking the conversation, this space is for polls. You can either open an issue if you believe it's a bug or a general discussion. You can also ask on StackOverflow. Thanks.