Replace a component prop with an `sx` style

Proprietary

Replaces a prop of a Material UI component with a property of its sx prop, such as <Divider light /> with <Divider sx={{ opacity: '0.6' }} />. The style is not added when the sx already sets it.

org.openrewrite.react.mui.convert-prop-to-sx

Required

componentNameString

The Material UI component.

propNameString

The prop to replace.

sxPropertyString

The sx property that replaces it.

sxValueString

The value of the property, as source code.

Optional

equivalentsString

Other sx properties that already set the style, separated by commas.

packageNameString

A package that re-exports Material UI.

mod run . --recipe=org.openrewrite.react.mui.convert-prop-to-sx \
  -P componentName=Divider \
  -P propName=light \
  -P sxProperty=opacity \
  -P sxValue=''\''0.6'\'''

Install it once, then run it on every repository under the current directory. New to the Moderne CLI? Set it up.

Replace a component prop with an sx style

Replace a component prop with an `sx` style