Replace sx callback object param with theme (#51)

mui · May 6, 2024 · 7a75d3c · 7a75d3c
1 parent df751ab
commit 7a75d3c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/packages/pigment-css-react/src/processors/sx.ts b/packages/pigment-css-react/src/processors/sx.ts
@@ -164,7 +164,8 @@ export class SxProcessor extends BaseProcessor {
 
   private processCss(styleObjOrFn: unknown, expressionValue: ExpressionValue) {
     const { themeArgs } = this.options as IOptions;
-    const styleObj = typeof styleObjOrFn === 'function' ? styleObjOrFn(themeArgs) : styleObjOrFn;
+    const styleObj =
+      typeof styleObjOrFn === 'function' ? styleObjOrFn(themeArgs?.theme) : styleObjOrFn;
 
     const res = cssFnValueToVariable({
       styleObj,

diff --git a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js
@@ -30,7 +30,7 @@ function App2(props) {
     className: props.className,
     style: props.style,
     children: /*#__PURE__*/ _jsx('p', {
-      sx: ({ theme }) => ({
+      sx: (theme) => ({
         color: (theme.vars || theme).palette.primary.main,
         ...theme.applyStyles('dark', {
           color: 'white',

diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js
@@ -23,7 +23,7 @@ const A = {
 function App(props) {
   return (
     <SliderRail
-      sx={({ theme }) => ({
+      sx={(theme) => ({
         mb: 1,
         ...theme.applyStyles('dark', {
           color: 'white',
@@ -52,7 +52,7 @@ function App2() {
 function App3(props) {
   return (
     <A.SliderRail
-      sx={({ theme }) => ({
+      sx={(theme) => ({
         color: (theme.vars || theme).palette.primary.main,
         fontSize: props.isRed ? 'h1-fontSize' : 'h2-fontSize',
         ':hover': {