Skip to content

Commit

Permalink
[material-ui][theme] Add documentation on migrating JSS's alternative…
Browse files Browse the repository at this point in the history
… array-based syntax to syntax supported by Emotion
  • Loading branch information
Clay Larson committed Apr 28, 2024
1 parent 16cb18a commit 447c6b6
Showing 1 changed file with 46 additions and 2 deletions.
48 changes: 46 additions & 2 deletions docs/data/material/migration/migration-v4/v5-style-changes.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,14 @@ All other changes must be handled manually.

## Migrate theme styleOverrides to Emotion

### Refactor local rule references

Although your style overrides defined in the theme may partially work, there is an important difference regarding how the nested elements are styled.

The `$` syntax (local rule reference) used with JSS will not work with Emotion.
You need to replace those selectors with a valid class selector.

### Replace state class names
#### Replace state class names

```diff
const theme = createTheme({
Expand All @@ -53,7 +55,7 @@ You need to replace those selectors with a valid class selector.
});
```

### Replace nested classes selectors with global class names
#### Replace nested classes selectors with global class names

```diff
const theme = createTheme({
Expand Down Expand Up @@ -99,6 +101,48 @@ You can rely on this instead of hardcoding the classes.

Take a look at the complete [list of global state classnames](/material-ui/customization/how-to-customize/#state-classes) available.

### Refactor alternative syntax for space- and comma-separated values

The alternative, array-based syntax JSS supports for space- and comma-separated values is not supported by Emotion.

#### Replace array-based values with string-based values

```diff
const theme = createTheme({
components: {
MuiBox: {
styleOverrides: {
root: {
- background: [
- ['url(image1.png)', 'no-repeat', 'top'],
- ['url(image2.png)', 'no-repeat', 'center'],
- '!important'
- ]
+ background: 'url(image1.png) no-repeat top, url(image2.png) no-repeat center !important'
}
}
}
}
});
```

Be sure to add units to numeric values as appropriate.

```diff
const theme = createTheme({
components: {
MuiOutlinedInput: {
styleOverrides: {
root: {
- padding: [[5, 8, 6]]
+ padding: '5px 8px 6px'
}
}
},
}
});
```

## ref

### Refactor non-ref-forwarding class components
Expand Down

0 comments on commit 447c6b6

Please sign in to comment.