Material UI components

Technical Questions
,
1

Hi Hi,

I’m currently working on a project where I need to integrate Material-UI/MUI components into Builder.io. Specifically, I want to customize and configure a the styles properties (i.e. font size, typography varient, padding etc.) of a component to be compatible with Builder.io.

Here’s a basic example of the code I’m working with:

import Typography from '@mui/material/Typography';

export interface BasicCardProps {
  subtitle: string;
  title: string;
  description: string;
  buttonText: string;
  // builderBlock: any;
}

export function BasicCard3(props: BasicCard3Props) {
  const { title, subtitle, description, buttonText } = props;
  return (
    <Card sx={{ minWidth: 275 }}>
      <CardContent>
        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
          {subtitle}
        </Typography>
        <Typography variant="h5" component="div">
          {title}
        </Typography>
        <Typography sx={{ mb: 1.5 }} color="text.secondary">
          {description}
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">{buttonText}</Button>
      </CardActions>
    </Card>
  );
}

I want to make this BasicCard component configurable through Builder.io. Has anyone successfully accomplished this or has insights on how to achieve it? Any guidance on modifying the code to work seamlessly with Builder.io, or suggestions on best practices, would be greatly appreciated.

Thank you!

2

Hi @Granite, Welcome to the Builder.io Forum!

You can achieve this using Custom component functionality. Here is the complete guidance doc link Intro to Integrating Custom Components - Builder.io

3

Hey, thank you! it doesnt answer the question, though - read this a few times and coundn’t come up with a solution