diff --git a/docs/src/pages/customization/theme-components/theme-components.md b/docs/src/pages/customization/theme-components/theme-components.md index 207c0deb7c08a1..2fc8e9d65891b1 100644 --- a/docs/src/pages/customization/theme-components/theme-components.md +++ b/docs/src/pages/customization/theme-components/theme-components.md @@ -77,8 +77,6 @@ const finalTheme = createTheme({ {{"demo": "pages/customization/theme-components/GlobalThemeOverrideCallback.js"}} -> ⚠️ the callback return type should be an object or an array, we don't support template literals(` `` `) as return type. - ### Using `sx` (experimental) syntax If you are not familiar `sx`, first check out [the concept](/system/the-sx-prop) and [the difference with the `styled`](/system/styled/#difference-with-the-sx-prop). diff --git a/packages/mui-system/src/createStyled.js b/packages/mui-system/src/createStyled.js index c94374a5e6b507..36b534475d1402 100644 --- a/packages/mui-system/src/createStyled.js +++ b/packages/mui-system/src/createStyled.js @@ -1,5 +1,4 @@ import styledEngineStyled from '@mui/styled-engine'; -import MuiError from '@mui/utils/macros/MuiError.macro'; import { getDisplayName } from '@mui/utils'; import createTheme from './createTheme'; import styleFunctionSx from './styleFunctionSx'; @@ -138,16 +137,8 @@ export default function createStyled(input = {}) { if (styleOverrides) { const resolvedStyleOverrides = {}; Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => { - const slotValue = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle; - if (typeof slotStyle === 'function' && typeof slotValue === 'string') { - throw new MuiError( - "MUI: The return type of the callback in '%s.styleOverrides.%s' cannot be a string. Change the return type to array or object instead.", - componentName, - slotKey, - ); - } else { - resolvedStyleOverrides[slotKey] = slotValue; - } + resolvedStyleOverrides[slotKey] = + typeof slotStyle === 'function' ? slotStyle(props) : slotStyle; }); return overridesResolver(props, resolvedStyleOverrides); } diff --git a/packages/mui-system/src/createStyled.test.js b/packages/mui-system/src/createStyled.test.js index b3e6dba82b1d2d..39be9742a592f6 100644 --- a/packages/mui-system/src/createStyled.test.js +++ b/packages/mui-system/src/createStyled.test.js @@ -228,6 +228,28 @@ describe('createStyled', () => { }); }); + it('support template string return from the callback', () => { + const finalTheme = createTheme({ + components: { + MuiButton: { + styleOverrides: { + root: () => ` + width: 300px; + `, + }, + }, + }, + }); + const { container } = render( + + + , + ); + expect(container.firstChild).toHaveComputedStyle({ + width: '300px', + }); + }); + it('works with sx', () => { const finalTheme = createTheme({ components: { diff --git a/packages/mui-utils/macros/MuiError.macro.js b/packages/mui-utils/macros/MuiError.macro.js index 3d03f671933aaf..749cd2ec77b8bc 100644 --- a/packages/mui-utils/macros/MuiError.macro.js +++ b/packages/mui-utils/macros/MuiError.macro.js @@ -2,27 +2,6 @@ const { createMacro, MacroError } = require('babel-plugin-macros'); const helperModuleImports = require('@babel/helper-module-imports'); const fs = require('fs'); const path = require('path'); -const prettier = require('prettier'); - -const workspaceRoot = path.resolve(__dirname, '../../../'); -const prettierConfigPath = path.join(workspaceRoot, 'prettier.config.js'); - -function writePrettifiedFile(filename, data) { - if (filename.endsWith('.tsx.preview')) { - fs.writeFileSync(filename, data); - } else { - const prettierConfig = prettier.resolveConfig.sync(filename, { - config: prettierConfigPath, - }); - if (prettierConfig === null) { - throw new Error( - `Could not resolve config for '${filename}' using prettier config path '${prettierConfigPath}'.`, - ); - } - - fs.writeFileSync(filename, prettier.format(data, { ...prettierConfig, filepath: filename })); - } -} function invertObject(object) { const inverted = {}; @@ -214,7 +193,7 @@ function muiError({ references, babel, config, source }) { }); if (missingError === 'write' && updatedErrorCodes) { - writePrettifiedFile(errorCodesPath, JSON.stringify(invertObject(errorCodesLookup), null, 2)); + fs.writeFileSync(errorCodesPath, JSON.stringify(invertObject(errorCodesLookup), null, 2)); } return { keepImports: false };