[system] Enable configuring the `sx` prop in the `theme` #35150

mnajdova · 2022-11-14T16:08:07Z

Breaking changes

Changes in the experimental API:

-import { styled, experimental_sx } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';

-const Component = styled('div)(experimental_sx({ p: 1 }});
+const Component = styled('div)(({ theme }) => theme.unstable_sx({ p: 1 }});

This PR changes the way the sx props works, by defining a config inside the theme for each key supported. This allows us to offer extensibility of the functionality of the sx prop, as well as overrides for some of its behavior. There shouldn't be any changes of the behavior.

Related to #30725 (it is now possible for this to be done in userland).
Fixes #32734, fixes #33525, fixes #33281

Docs preview: https://deploy-preview-35150--material-ui.netlify.app/system/experimental-api/configure-the-sx-prop/

Examples:

const sxConfig = {
  // the color value will be mapped to a value inside theme.palette
  color: {
    themeKey: 'palette',
  },
  // allowing for custom transform functions
  displayPrint: {
    cssProperty: false,
    transform: (value) => ({
      '@media print': {
        display: value,
      },
    }),
  },
  // also allowing for completely different logic
  p: {
    style: () => {}
  }
};

We are going to export the default sx config, so that people can compose it with their custom logic.

…l-ui; branch 'master' of https://github.com/mui-org/material-ui into master

…master

mui-bot · 2022-11-14T16:11:16Z

	Messages
📖	Netlify deploy preview: https://deploy-preview-35150--material-ui.netlify.app/

@material-ui/core: parsed: +0.26% , gzip: +0.24%
@material-ui/lab: parsed: +0.53% , gzip: +0.32%
@material-ui/system: parsed: +4.37% , gzip: +2.72%
@mui/joy: parsed: +0.37% , gzip: +0.14%

Details of bundle changes

Generated by 🚫 dangerJS against cdd96c9

…master

packages/mui-joy/src/Box/Box.test.js

Signed-off-by: Marija Najdova <mnajdova@gmail.com>

packages/mui-joy/src/styles/defaultTheme.ts

Signed-off-by: Marija Najdova <mnajdova@gmail.com>

mnajdova · 2022-11-16T13:25:10Z

packages/mui-joy/src/styles/sxConfig.ts

@@ -0,0 +1,35 @@
+import { unstable_defaultSxConfig } from '@mui/system';
+
+const sxConfig = {


For comparison, this is how it looked previously: https://github.com/mui/material-ui/blob/1c897f813aea4f3293270071aa3851cc214e0da9/packages/mui-joy/src/styles/styleFunctionSx.ts

docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx

docs/data/system/experimental-api/extend-sx-prop/extend-sx-prop.md

docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx

docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx

docs/data/system/experimental-api/extend-sx-prop/extend-sx-prop.md

packages/mui-system/src/styleFunctionSx/styleFunctionSx.js

packages/mui-system/src/styleFunctionSx/defaultSxConfig.js

packages/mui-joy/src/styles/CssVarsProvider.tsx

oliviertassinari · 2022-11-30T23:45:07Z

packages/mui-material-next/src/Button/Button.tsx

@@ -469,6 +469,8 @@ const Button = React.forwardRef(function Button<
    tabIndex,
    type,
    variant,
+    // required for making sure the sx prop is handled correctly
+    materialYouComponent: true,


Think of Material You as a separate library similar to Joy UI. Then add a doc similar to https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/ that guides how to use MD3 in the existing MD2 project.

I have tried the implications of this PR in the Joy UI + Material UI demos, e.g. https://codesandbox.io/s/material-ui-feat-joy-ui-forked-z9bv90?file=/demo.tsx. It seems to mostly work like before, only that the sx behavior is linked to the theme config, so based on the last theme that is deep merged.

It's a bit sad though that we can't have a different emotion context. I had a friend who recently asked me about using Joy UI inside an existing Material UI app (an engineer without a front-end background). He was intimidated by the size of the examples, he didn't try 🙃.

oliviertassinari

A great step froward for MUI System 👍

siriwatknp

👍 The implementation looks good to me.

siriwatknp · 2022-12-01T03:31:54Z

docs/data/system/pages.ts

+        pathname: '/system/experimental-api/extend-sx-prop',
+        title: 'Extend the `sx` prop',


Suggested change

pathname: '/system/experimental-api/extend-sx-prop',

title: 'Extend the `sx` prop',

pathname: '/system/experimental-api/sx-config',

title: 'sx config',

How about renaming the page to sx config or configure sx prop and grouping these into the page:

override the default config (from Override some of the existing behavior )

add your own config (from Extend the sx prop)

API

cc @samuelsycamore might have a better name.

Yeah, "Configure the sx prop" sounds better, as the page is both about extending and changing. Updated!

siriwatknp

This section should be updated or removed. https://deploy-preview-35150--material-ui.netlify.app/material-ui/customization/theme-components/#the-sx-syntax-experimental

Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> Signed-off-by: Marija Najdova <mnajdova@gmail.com>

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> Signed-off-by: Marija Najdova <mnajdova@gmail.com>

…op.tsx Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> Signed-off-by: Marija Najdova <mnajdova@gmail.com>

…viorSxProp.tsx Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> Signed-off-by: Marija Najdova <mnajdova@gmail.com>

mnajdova · 2022-12-01T13:00:45Z

This section should be updated or removed. https://deploy-preview-35150--material-ui.netlify.app/material-ui/customization/theme-components/#the-sx-syntax-experimental

I've updated it to use the theme.unstable_sx syntax. Nice catch Jun! :)

…master

mnajdova · 2022-12-06T11:43:58Z

@samuelsycamore this should be ready for final review :)

samuelsycamore

Text looks good! Just left one final comment with grammar suggestions.

docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md

…ure-the-sx-prop.md Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Marija Najdova <mnajdova@gmail.com>

…master

mnajdova added 11 commits October 31, 2022 10:29

[release] v5.10.12

d416262

Remove autogenerated text

a4ac85f

Merge branch 'master' into release/5.10.12

9d0d4f3

Updated changelog

7e1815a

Merge branch 'master' into release/5.10.12

4a6bafb

Updated changelog

1e556dc

Merge branch 'release/5.10.12' of https://github.com/mnajdova/materia…

bf55df5

…l-ui; branch 'master' of https://github.com/mui-org/material-ui into master

Merge branch 'master' of https://github.com/mui-org/material-ui into …

2f2c1a3

…master

Merge branch 'master' of https://github.com/mui-org/material-ui into …

696baf0

…master

Merge branch 'master' of https://github.com/mui-org/material-ui into …

150fab6

…master

[system] Explore different sx config

2c1c0e1

zannager added the package: system Specific to @mui/system label Nov 15, 2022

mnajdova added 7 commits November 15, 2022 09:10

lint issues

aa8dab7

Refactor Joy's usage

5593dc9

Fix experimental sx

db412b5

Fixes

c9b5e14

More fixes

3c27f52

Moved and fixed some tests

c71e273

fixes & lint issues

457d61d

mnajdova changed the title ~~[WIP][system] Explore alternative sx config~~ [POC][system] Explore alternative sx config Nov 15, 2022

mnajdova added the proof of concept Studying and/or experimenting with a to be validated approach label Nov 15, 2022

mnajdova added 2 commits November 15, 2022 23:25

Merge branch 'master' of https://github.com/mui-org/material-ui into …

6205b27

…master

Merge branch 'master' into chore/sx-improvements

2a282d1

mnajdova marked this pull request as ready for review November 16, 2022 09:38

mnajdova commented Nov 16, 2022

View reviewed changes

packages/mui-joy/src/Box/Box.test.js Outdated Show resolved Hide resolved

Update packages/mui-joy/src/Box/Box.test.js

aab6ec2

Signed-off-by: Marija Najdova <mnajdova@gmail.com>

mnajdova commented Nov 16, 2022

View reviewed changes

packages/mui-joy/src/styles/defaultTheme.ts Show resolved Hide resolved

Update packages/mui-joy/src/styles/defaultTheme.ts

5556acb

Signed-off-by: Marija Najdova <mnajdova@gmail.com>

mnajdova commented Nov 16, 2022

View reviewed changes

oliviertassinari reviewed Nov 30, 2022

View reviewed changes

siriwatknp approved these changes Dec 1, 2022

View reviewed changes

siriwatknp reviewed Dec 1, 2022

View reviewed changes

mnajdova and others added 7 commits December 1, 2022 10:11

Apply suggestions from code review

9afb562

Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> Signed-off-by: Marija Najdova <mnajdova@gmail.com>

Update packages/mui-joy/src/styles/CssVarsProvider.tsx

0debf67

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> Signed-off-by: Marija Najdova <mnajdova@gmail.com>

Update packages/mui-system/src/styleFunctionSx/styleFunctionSx.js

d68bbe6

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> Signed-off-by: Marija Najdova <mnajdova@gmail.com>

Update docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxPr…

80a221f

…op.tsx Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> Signed-off-by: Marija Najdova <mnajdova@gmail.com>

Update docs/data/system/experimental-api/extend-sx-prop/ChangeTheBeha…

c0ffaba

…viorSxProp.tsx Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> Signed-off-by: Marija Najdova <mnajdova@gmail.com>

Update docs/data/system/experimental-api/extend-sx-prop/ChangeTheBeha…

e42d74c

…viorSxProp.tsx Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> Signed-off-by: Marija Najdova <mnajdova@gmail.com>

Address review comments

75b5374

lint issues

37c6b59

mnajdova requested a review from samuelsycamore December 1, 2022 14:14

mnajdova added 2 commits December 1, 2022 15:44

types

99a7021

Merge branch 'master' of https://github.com/mui-org/material-ui into …

743c1c8

…master

samuelsycamore approved these changes Dec 6, 2022

View reviewed changes

docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md Outdated Show resolved Hide resolved

mnajdova and others added 4 commits December 7, 2022 07:48

Update docs/data/system/experimental-api/configure-the-sx-prop/config…

4a5ecc5

…ure-the-sx-prop.md Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Marija Najdova <mnajdova@gmail.com>

Merge branch 'master' of https://github.com/mui-org/material-ui into …

ad8eb6d

…master

Merge branch 'master' into chore/sx-improvements

ff505be

prettier

cdd96c9

mnajdova merged commit d23e42b into mui:master Dec 7, 2022

mnajdova changed the title ~~[system] Enable configuring the sx mappings in the theme~~ [system] Enable configuring the sx prop in the theme Dec 7, 2022

oliviertassinari mentioned this pull request Dec 11, 2022

[test] Fix broken master branch #35446

Merged

mnajdova mentioned this pull request Dec 13, 2022

5.11.0 #35453

Merged

corneliugaina mentioned this pull request Dec 15, 2022

'experimental_sx' is not exported from '@mui/system' #35475

Closed

2 tasks

mnajdova mentioned this pull request Dec 19, 2022

[Fix] Bring experimental_sx back with error code #35528

Merged

1 task

benwerner01 mentioned this pull request Feb 6, 2023

Implement "change payment method" settings panel blockprotocol/blockprotocol#933

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[system] Enable configuring the `sx` prop in the `theme` #35150

[system] Enable configuring the `sx` prop in the `theme` #35150

mnajdova commented Nov 14, 2022 •

edited

mui-bot commented Nov 14, 2022 •

edited

mnajdova Nov 16, 2022

oliviertassinari Nov 30, 2022 •

edited

oliviertassinari left a comment

siriwatknp left a comment

siriwatknp Dec 1, 2022 •

edited

mnajdova Dec 1, 2022 •

edited

siriwatknp left a comment

mnajdova commented Dec 1, 2022

mnajdova commented Dec 6, 2022

samuelsycamore left a comment

		@@ -0,0 +1,35 @@
		import { unstable_defaultSxConfig } from '@mui/system';

		const sxConfig = {

		pathname: '/system/experimental-api/extend-sx-prop',
		title: 'Extend the `sx` prop',

[system] Enable configuring the sx prop in the theme #35150

[system] Enable configuring the sx prop in the theme #35150

Conversation

mnajdova commented Nov 14, 2022 • edited

Breaking changes

mui-bot commented Nov 14, 2022 • edited

mnajdova Nov 16, 2022

Choose a reason for hiding this comment

oliviertassinari Nov 30, 2022 • edited

Choose a reason for hiding this comment

oliviertassinari left a comment

Choose a reason for hiding this comment

siriwatknp left a comment

Choose a reason for hiding this comment

siriwatknp Dec 1, 2022 • edited

Choose a reason for hiding this comment

mnajdova Dec 1, 2022 • edited

Choose a reason for hiding this comment

siriwatknp left a comment

Choose a reason for hiding this comment

mnajdova commented Dec 1, 2022

mnajdova commented Dec 6, 2022

samuelsycamore left a comment

Choose a reason for hiding this comment

[system] Enable configuring the `sx` prop in the `theme` #35150

[system] Enable configuring the `sx` prop in the `theme` #35150

mnajdova commented Nov 14, 2022 •

edited

mui-bot commented Nov 14, 2022 •

edited

oliviertassinari Nov 30, 2022 •

edited

siriwatknp Dec 1, 2022 •

edited

mnajdova Dec 1, 2022 •

edited