Migrating from Material UI

The first step is to install @volvo-cars/css and @volvo-cars/edls-css. During the transition period, you can use both MUI and EDLS components in the same project.

The migration process varies depending on the type of component.

---

Core and layout components

Examples: Box, Stack, Grid, Typography, Button

The design system provides utility classes as alternatives to these MUI components. If you’re not familiar with utility classes, read the CSS architecture page first.

For general layouts and Grid components, follow the layout guidelines.

For Box, Stack, Typography, and Button, we provide codemods.

Caution

These codemods won’t cover every case. They are a good starting point, but you will need to manually review the changes and adjust for your specific use case. We recommend screenshot testing (e.g. Percy) to ensure that changes don’t affect the visual appearance of your application.

Some small visual adjustments may be needed — EDLS components may not look exactly the same as their MUI equivalents.

Questions? Reach out in #edls.

The codemods perform the following steps:

• Replace JSX markup to use HTML elements instead of MUI components.
• Replace sx attributes with style attributes.
• Transform margin, padding, and flex properties into Volvo CSS classes, removing them from the style object.
• Transform variant attributes into Volvo CSS classes.

If any properties are not supported by Volvo CSS, they are kept in the style object.

1. Install the tooling

   yarn add jscodeshift @volvo-cars/edls-cli -D

2. Run the codemods

   Replace . with the path to the folder you want to migrate. We recommend creating one PR per component to keep changes reviewable.

   npx jscodeshift --transform ./node_modules/@volvo-cars/edls-cli/codemods/box-transform.cjs --parser tsx --ignore-pattern="*.ts" --ignore-pattern="*.d.ts" --ignore-pattern="node_modules" .
   npx jscodeshift --transform ./node_modules/@volvo-cars/edls-cli/codemods/stack-transform.cjs --parser tsx --ignore-pattern="*.ts" --ignore-pattern="*.d.ts" --ignore-pattern="node_modules" .
   npx jscodeshift --transform ./node_modules/@volvo-cars/edls-cli/codemods/button-transform.cjs --parser tsx --ignore-pattern="*.ts" --ignore-pattern="*.d.ts" --ignore-pattern="node_modules" .
   npx jscodeshift --transform ./node_modules/@volvo-cars/edls-cli/codemods/typography-transform.cjs --parser tsx --ignore-pattern="*.ts" --ignore-pattern="*.d.ts" --ignore-pattern="node_modules" .

3. Remove MUI imports. This is not included in the codemods due to the different ways MUI components can be imported. A find-and-replace in your editor will do the trick.

4. Run Prettier and ESLint to format the migrated code.

---

Component mapping

Material UI	EDLS Alternative
Button	Button
Icon	Icon
IconButton	IconButton
Input	TextInput
TextArea	TextArea
Checkbox	Checkbox
Radio	Radio
Select	Select
Switch	Switch
Slider	RangeSlider
Dialog	Dialog
Sidebar	Sheet
Tooltip	Tooltip
Breadcrumbs	Breadcrumbs
Accordion	Accordion
DataGrid	Table
TablePagination	TablePagination
Pagination	PagePagination
DatePicker	DropdownCalendar
DateRangePicker	DropdownCalendarRange
MultiSelect	DropdownMultiSelect
FilterSelect	DropdownSelect
Skeleton	Skeleton
Progress	Spinner
Snackbar	Work in progress

Refer to the component documentation for usage details and examples of each alternative.