what is alternative of .attrs in material ui 5 with styled-components as styled-engine

Question

This is how we add className to a styled-component

import styled from 'styled-components';
export const FieldsColumnWrapper = styled.div.attrs({
  className: 'components-list column',
})`
  grid-area: components-list;
  display: flex;
`

We can use attrs function to pass this className = components-list column, whenever this component is rendered., the classname component-list column is present in the div

However if use styled-component as styled engine for mui 5, and then code is modified as below

import { styled } from '@mui/material/styles';
export const Wrapper = styled('div', {
  name: 'form-builder',
  slot: 'form-builder',
}) `
  display: grid;
  grid-template-areas: 'components-list forms-list field-config-editor';
  grid-template-columns: 300px 1fr 450px;
`

I want to know what should I use on the styled coming from @mui/material/styles, that will allow me to add className on the HTML element created by the component?

Answer 1

'.attrs' API is not yet added in MUI v5. If you want to achieve the same behaviour, you can do this,

import { styled } from '@mui/material/styles';

export const Wrapper = styled('div')`
  display: grid;
  grid-template-areas: 'components-list forms-list field-config-editor';
  grid-template-columns: 300px 1fr 450px;
`;

Wrapper.defaultProps = {
  name: 'form-builder',
  slot: 'form-builder',
};

You can refer more about this issue here https://github.com/mui/material-ui/issues/29492