1

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?

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
Akshay Vijay Jain
  • 13,461
  • 8
  • 60
  • 73

1 Answers1

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

Abdur Rahman
  • 33
  • 5