) => {
+ setAnchorEl(event.currentTarget);
+ };
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ return (
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/examples/material-ui-vite-ts/src/ProTip.tsx b/examples/material-ui-vite-tailwind-ts/src/ProTip.tsx
similarity index 82%
rename from examples/material-ui-vite-ts/src/ProTip.tsx
rename to examples/material-ui-vite-tailwind-ts/src/ProTip.tsx
index 217b5bf4f92a10..0369560a348200 100644
--- a/examples/material-ui-vite-ts/src/ProTip.tsx
+++ b/examples/material-ui-vite-tailwind-ts/src/ProTip.tsx
@@ -1,7 +1,6 @@
-import * as React from 'react';
-import Link from '@mui/material/Link';
+// import Link from '@mui/material/Link';
+import { Link, Typography } from '@mui/material';
import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
-import Typography from '@mui/material/Typography';
function LightBulbIcon(props: SvgIconProps) {
return (
@@ -17,7 +16,7 @@ export default function ProTip() {
{'Pro tip: See more '}
templates
- {' in the Material UI documentation.'}
+ {' in the Material UI documentation.'}
);
-}
+}
\ No newline at end of file
diff --git a/examples/material-ui-vite-tailwind-ts/src/assets/react.svg b/examples/material-ui-vite-tailwind-ts/src/assets/react.svg
new file mode 100644
index 00000000000000..6c87de9bb33584
--- /dev/null
+++ b/examples/material-ui-vite-tailwind-ts/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/material-ui-vite-tailwind-ts/src/index.css b/examples/material-ui-vite-tailwind-ts/src/index.css
new file mode 100644
index 00000000000000..a461c505f1f0c2
--- /dev/null
+++ b/examples/material-ui-vite-tailwind-ts/src/index.css
@@ -0,0 +1 @@
+@import "tailwindcss";
\ No newline at end of file
diff --git a/examples/material-ui-vite-tailwind-ts/src/main.tsx b/examples/material-ui-vite-tailwind-ts/src/main.tsx
new file mode 100644
index 00000000000000..bef5202a32cbd0
--- /dev/null
+++ b/examples/material-ui-vite-tailwind-ts/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ ,
+)
diff --git a/examples/material-ui-vite-ts/src/vite-env.d.ts b/examples/material-ui-vite-tailwind-ts/src/vite-env.d.ts
similarity index 100%
rename from examples/material-ui-vite-ts/src/vite-env.d.ts
rename to examples/material-ui-vite-tailwind-ts/src/vite-env.d.ts
diff --git a/examples/material-ui-vite-tailwind-ts/tsconfig.app.json b/examples/material-ui-vite-tailwind-ts/tsconfig.app.json
new file mode 100644
index 00000000000000..358ca9ba93f089
--- /dev/null
+++ b/examples/material-ui-vite-tailwind-ts/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/examples/material-ui-vite-tailwind-ts/tsconfig.json b/examples/material-ui-vite-tailwind-ts/tsconfig.json
new file mode 100644
index 00000000000000..1ffef600d959ec
--- /dev/null
+++ b/examples/material-ui-vite-tailwind-ts/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/examples/material-ui-vite-tailwind-ts/tsconfig.node.json b/examples/material-ui-vite-tailwind-ts/tsconfig.node.json
new file mode 100644
index 00000000000000..db0becc8b033a4
--- /dev/null
+++ b/examples/material-ui-vite-tailwind-ts/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2022",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/examples/material-ui-vite-tailwind-ts/vite.config.ts b/examples/material-ui-vite-tailwind-ts/vite.config.ts
new file mode 100644
index 00000000000000..3d15f68d73d115
--- /dev/null
+++ b/examples/material-ui-vite-tailwind-ts/vite.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [
+ react(),
+ tailwindcss(),
+ ],
+})
diff --git a/examples/material-ui-vite-ts/package.json b/examples/material-ui-vite-ts/package.json
deleted file mode 100644
index 82545735254b39..00000000000000
--- a/examples/material-ui-vite-ts/package.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
- "name": "material-ui-vite-ts",
- "private": true,
- "version": "5.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "dependencies": {
- "@emotion/react": "latest",
- "@emotion/styled": "latest",
- "@mui/icons-material": "next",
- "@mui/material": "next",
- "react": "latest",
- "react-dom": "latest"
- },
- "devDependencies": {
- "@types/react": "latest",
- "@types/react-dom": "latest",
- "@vitejs/plugin-react": "latest",
- "typescript": "latest",
- "vite": "latest"
- }
-}
diff --git a/examples/material-ui-vite-ts/src/main.tsx b/examples/material-ui-vite-ts/src/main.tsx
deleted file mode 100644
index ad50afc179c895..00000000000000
--- a/examples/material-ui-vite-ts/src/main.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
-import { ThemeProvider } from '@mui/material/styles';
-import { CssBaseline } from '@mui/material';
-import theme from './theme';
-import App from './App';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-
-
-
-
-
- ,
-);
diff --git a/examples/material-ui-vite-ts/src/theme.tsx b/examples/material-ui-vite-ts/src/theme.tsx
deleted file mode 100644
index 7ba9892c1b1a78..00000000000000
--- a/examples/material-ui-vite-ts/src/theme.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { createTheme } from '@mui/material/styles';
-import { red } from '@mui/material/colors';
-
-// A custom theme for this app
-const theme = createTheme({
- cssVariables: true,
- palette: {
- primary: {
- main: '#556cd6',
- },
- secondary: {
- main: '#19857b',
- },
- error: {
- main: red.A400,
- },
- },
-});
-
-export default theme;
diff --git a/examples/material-ui-vite-ts/tsconfig.json b/examples/material-ui-vite-ts/tsconfig.json
deleted file mode 100644
index 3d0a51a86e2024..00000000000000
--- a/examples/material-ui-vite-ts/tsconfig.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
- "compilerOptions": {
- "target": "ESNext",
- "useDefineForClassFields": true,
- "lib": ["DOM", "DOM.Iterable", "ESNext"],
- "allowJs": false,
- "skipLibCheck": true,
- "esModuleInterop": false,
- "allowSyntheticDefaultImports": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "module": "ESNext",
- "moduleResolution": "Node",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "noEmit": true,
- "jsx": "react-jsx"
- },
- "include": ["src"],
- "references": [{ "path": "./tsconfig.node.json" }]
-}
diff --git a/examples/material-ui-vite-ts/tsconfig.node.json b/examples/material-ui-vite-ts/tsconfig.node.json
deleted file mode 100644
index 9d31e2aed93c87..00000000000000
--- a/examples/material-ui-vite-ts/tsconfig.node.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "compilerOptions": {
- "composite": true,
- "module": "ESNext",
- "moduleResolution": "Node",
- "allowSyntheticDefaultImports": true
- },
- "include": ["vite.config.ts"]
-}
diff --git a/examples/material-ui-vite-ts/vite.config.ts b/examples/material-ui-vite-ts/vite.config.ts
deleted file mode 100644
index 4a5def4c3d78f7..00000000000000
--- a/examples/material-ui-vite-ts/vite.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-// https://vite.dev/config/
-export default defineConfig({
- plugins: [react()],
-});
From 73abccb2d4247911dabf9c202682e8180bf15c6b Mon Sep 17 00:00:00 2001
From: Aransiola Ayodele <36636824+CodeLeom@users.noreply.github.com>
Date: Wed, 26 Feb 2025 22:20:15 +0100
Subject: [PATCH 3/9] doc: modify the cra link to vite setup example
---
docs/data/material/guides/typescript/typescript.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/material/guides/typescript/typescript.md b/docs/data/material/guides/typescript/typescript.md
index 6d22fbbe2304e1..34e9ce997cf27a 100644
--- a/docs/data/material/guides/typescript/typescript.md
+++ b/docs/data/material/guides/typescript/typescript.md
@@ -6,7 +6,7 @@
-Material UI requires a minimum version of TypeScript 4.7. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-ts) example.
+Material UI requires a minimum version of TypeScript 4.7. Have a look at the [Vite with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-tailwind-ts) example.
For types to work, it's recommended that you have at least the following options enabled in your `tsconfig.json`:
From 4e61c51f5f3ce7d1927ea5c8bc698c5cab2befe6 Mon Sep 17 00:00:00 2001
From: Aransiola Ayodele <36636824+CodeLeom@users.noreply.github.com>
Date: Wed, 26 Feb 2025 22:36:54 +0100
Subject: [PATCH 4/9] doc: remove cra explanation and replace with a Vite
explanation
---
.../content-security-policy.md | 23 +++++++++++++++----
1 file changed, 18 insertions(+), 5 deletions(-)
diff --git a/docs/data/material/guides/content-security-policy/content-security-policy.md b/docs/data/material/guides/content-security-policy/content-security-policy.md
index f24eca55899e21..3656b3b40c92b8 100644
--- a/docs/data/material/guides/content-security-policy/content-security-policy.md
+++ b/docs/data/material/guides/content-security-policy/content-security-policy.md
@@ -72,13 +72,26 @@ function App(props) {
}
```
-### Create React App (CRA)
+### CSP in Vite
-According to the [Create React App Docs](https://create-react-app.dev/docs/advanced-configuration/), a Create React App will dynamically embed the runtime script into index.html during the production build by default.
-This will require a new hash to be set in your CSP during each deployment.
+According to the [Vite Docs](https://vite.dev/guide/features.html#content-security-policy-csp), Vite requires a few specific configurations for proper CSP deployment due to its internal handling of assets and modules.
-To use a CSP with a project initialized as a Create React App, you will need to set the `INLINE_RUNTIME_CHUNK=false` variable in the `.env` file used for your production build.
-This will import the runtime script as usual instead of embedding it, avoiding the need to set a new hash during each deployment.
+#### Vite supports CSP with a few configurations:
+
+Nonce Injection:
+When you set `html.cspNonce` in your Vite config, Vite adds a nonce to all
+
+
diff --git a/examples/material-ui-vite-styled-components-ts/package.json b/examples/material-ui-vite-styled-components-ts/package.json
new file mode 100644
index 00000000000000..c51d96fb39e401
--- /dev/null
+++ b/examples/material-ui-vite-styled-components-ts/package.json
@@ -0,0 +1,33 @@
+{
+ "name": "material-ui-vite-styled-components-ts",
+ "private": true,
+ "version": "6.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc -b && vite build",
+ "lint": "eslint .",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@mui/material": "^6.4.6",
+ "@mui/styled-engine-sc": "^6.4.6",
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
+ "styled-components": "^6.1.15"
+ },
+ "devDependencies": {
+ "@eslint/js": "^9.21.0",
+ "@types/react": "^19.0.10",
+ "@types/react-dom": "^19.0.4",
+ "@types/styled-components": "^5.1.34",
+ "@vitejs/plugin-react": "^4.3.4",
+ "eslint": "^9.21.0",
+ "eslint-plugin-react-hooks": "^5.0.0",
+ "eslint-plugin-react-refresh": "^0.4.19",
+ "globals": "^15.15.0",
+ "typescript": "~5.7.2",
+ "typescript-eslint": "^8.24.1",
+ "vite": "^6.2.0"
+ }
+}
diff --git a/examples/material-ui-vite-styled-components-ts/public/vite.svg b/examples/material-ui-vite-styled-components-ts/public/vite.svg
new file mode 100644
index 00000000000000..e7b8dfb1b2a60b
--- /dev/null
+++ b/examples/material-ui-vite-styled-components-ts/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/material-ui-vite-styled-components-ts/src/App.tsx b/examples/material-ui-vite-styled-components-ts/src/App.tsx
new file mode 100644
index 00000000000000..6c516ad94c4565
--- /dev/null
+++ b/examples/material-ui-vite-styled-components-ts/src/App.tsx
@@ -0,0 +1,22 @@
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+
+const CustomButton = styled(Button)`
+ background-color: #1976d2;
+ &:hover {
+ background-color: #115293;
+ }
+`;
+
+const App: React.FC = () => {
+ return (
+
+
Hello Material UI with Styled-Components in TypeScript
+
+ Styled Button
+
+
+ );
+};
+
+export default App;
diff --git a/examples/material-ui-vite-styled-components-ts/src/assets/react.svg b/examples/material-ui-vite-styled-components-ts/src/assets/react.svg
new file mode 100644
index 00000000000000..6c87de9bb33584
--- /dev/null
+++ b/examples/material-ui-vite-styled-components-ts/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/material-ui-vite-styled-components-ts/src/index.css b/examples/material-ui-vite-styled-components-ts/src/index.css
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/examples/material-ui-vite-styled-components-ts/src/main.tsx b/examples/material-ui-vite-styled-components-ts/src/main.tsx
new file mode 100644
index 00000000000000..bef5202a32cbd0
--- /dev/null
+++ b/examples/material-ui-vite-styled-components-ts/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ ,
+)
diff --git a/examples/material-ui-vite-styled-components-ts/src/vite-env.d.ts b/examples/material-ui-vite-styled-components-ts/src/vite-env.d.ts
new file mode 100644
index 00000000000000..11f02fe2a0061d
--- /dev/null
+++ b/examples/material-ui-vite-styled-components-ts/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/examples/material-ui-vite-styled-components-ts/tsconfig.app.json b/examples/material-ui-vite-styled-components-ts/tsconfig.app.json
new file mode 100644
index 00000000000000..358ca9ba93f089
--- /dev/null
+++ b/examples/material-ui-vite-styled-components-ts/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/examples/material-ui-vite-styled-components-ts/tsconfig.json b/examples/material-ui-vite-styled-components-ts/tsconfig.json
new file mode 100644
index 00000000000000..1ffef600d959ec
--- /dev/null
+++ b/examples/material-ui-vite-styled-components-ts/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/examples/material-ui-vite-styled-components-ts/tsconfig.node.json b/examples/material-ui-vite-styled-components-ts/tsconfig.node.json
new file mode 100644
index 00000000000000..db0becc8b033a4
--- /dev/null
+++ b/examples/material-ui-vite-styled-components-ts/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2022",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/examples/material-ui-vite-styled-components-ts/vite.config.ts b/examples/material-ui-vite-styled-components-ts/vite.config.ts
new file mode 100644
index 00000000000000..069131cc0fdf85
--- /dev/null
+++ b/examples/material-ui-vite-styled-components-ts/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ resolve: {
+ alias: {
+ '@mui/styled-engine': '@mui/styled-engine-sc'
+ }
+ }
+
+})
diff --git a/examples/material-ui-vite-styled-components/.gitignore b/examples/material-ui-vite-styled-components/.gitignore
new file mode 100644
index 00000000000000..a547bf36d8d11a
--- /dev/null
+++ b/examples/material-ui-vite-styled-components/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/material-ui-vite-styled-components/README.md b/examples/material-ui-vite-styled-components/README.md
new file mode 100644
index 00000000000000..0f3ff4be1803e0
--- /dev/null
+++ b/examples/material-ui-vite-styled-components/README.md
@@ -0,0 +1,42 @@
+# Material UI - Vite example with styled-components
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui/material-ui):
+
+
+
+```bash
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-vite-styled-components
+cd material-ui-vite-styled-components
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+## CodeSandbox
+
+
+
+Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-vite-styled-components).
+
+
+
+The following link leverages this demo: https://next.mui.com/material-ui/integrations/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json`.
+
+[](https://codesandbox.io/p/sandbox/styled-components-interoperability-w9z9d)
+
+## The idea behind the example
+
+This example demonstrates how to set up Material UI with [Vite](https://github.com/vitejs/vite), using [styled-components](https://styled-components.com/) as a style engine for your application.
+
+## What's next?
+
+
+
+You now have a working example project.
+You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section.
\ No newline at end of file
diff --git a/examples/material-ui-vite-styled-components/eslint.config.js b/examples/material-ui-vite-styled-components/eslint.config.js
new file mode 100644
index 00000000000000..238d2e4e6436b3
--- /dev/null
+++ b/examples/material-ui-vite-styled-components/eslint.config.js
@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+ { ignores: ['dist'] },
+ {
+ files: ['**/*.{js,jsx}'],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ parserOptions: {
+ ecmaVersion: 'latest',
+ ecmaFeatures: { jsx: true },
+ sourceType: 'module',
+ },
+ },
+ settings: { react: { version: '18.3' } },
+ plugins: {
+ react,
+ 'react-hooks': reactHooks,
+ 'react-refresh': reactRefresh,
+ },
+ rules: {
+ ...js.configs.recommended.rules,
+ ...react.configs.recommended.rules,
+ ...react.configs['jsx-runtime'].rules,
+ ...reactHooks.configs.recommended.rules,
+ 'react/jsx-no-target-blank': 'off',
+ 'react-refresh/only-export-components': [
+ 'warn',
+ { allowConstantExport: true },
+ ],
+ },
+ },
+]
diff --git a/examples/material-ui-vite-styled-components/index.html b/examples/material-ui-vite-styled-components/index.html
new file mode 100644
index 00000000000000..fc961668dcd016
--- /dev/null
+++ b/examples/material-ui-vite-styled-components/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+ Vite + Material UI + Styled components
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/material-ui-vite-styled-components/package.json b/examples/material-ui-vite-styled-components/package.json
new file mode 100644
index 00000000000000..0acca833249e76
--- /dev/null
+++ b/examples/material-ui-vite-styled-components/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "material-ui-vite-styled-components",
+ "private": true,
+ "version": "6.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "lint": "eslint .",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@mui/material": "^6.4.6",
+ "@mui/styled-engine-sc": "^6.4.6",
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
+ "styled-components": "^6.1.15"
+ },
+ "devDependencies": {
+ "@eslint/js": "^9.21.0",
+ "@types/react": "^19.0.10",
+ "@types/react-dom": "^19.0.4",
+ "@vitejs/plugin-react": "^4.3.4",
+ "eslint": "^9.21.0",
+ "eslint-plugin-react": "^7.37.4",
+ "eslint-plugin-react-hooks": "^5.0.0",
+ "eslint-plugin-react-refresh": "^0.4.19",
+ "globals": "^15.15.0",
+ "vite": "^6.2.0"
+ }
+}
diff --git a/examples/material-ui-vite-styled-components/public/vite.svg b/examples/material-ui-vite-styled-components/public/vite.svg
new file mode 100644
index 00000000000000..e7b8dfb1b2a60b
--- /dev/null
+++ b/examples/material-ui-vite-styled-components/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/material-ui-vite-styled-components/src/App.jsx b/examples/material-ui-vite-styled-components/src/App.jsx
new file mode 100644
index 00000000000000..7a2ad155deb022
--- /dev/null
+++ b/examples/material-ui-vite-styled-components/src/App.jsx
@@ -0,0 +1,22 @@
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+
+const CustomButton = styled(Button)`
+ background-color: #1976d2;
+ &:hover {
+ background-color: #115293;
+ }
+`;
+
+function App() {
+ return (
+
+
Hello Material UI with Styled Components
+
+ Styled Button
+
+
+ );
+}
+
+export default App;
\ No newline at end of file
diff --git a/examples/material-ui-vite-styled-components/src/assets/react.svg b/examples/material-ui-vite-styled-components/src/assets/react.svg
new file mode 100644
index 00000000000000..6c87de9bb33584
--- /dev/null
+++ b/examples/material-ui-vite-styled-components/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/material-ui-vite-styled-components/src/index.css b/examples/material-ui-vite-styled-components/src/index.css
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/examples/material-ui-vite-styled-components/src/main.jsx b/examples/material-ui-vite-styled-components/src/main.jsx
new file mode 100644
index 00000000000000..b9a1a6deac8775
--- /dev/null
+++ b/examples/material-ui-vite-styled-components/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+
+
+ ,
+)
diff --git a/examples/material-ui-vite-styled-components/vite.config.js b/examples/material-ui-vite-styled-components/vite.config.js
new file mode 100644
index 00000000000000..52b09774de23a5
--- /dev/null
+++ b/examples/material-ui-vite-styled-components/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ resolve: {
+ alias: {
+ '@mui/styled-engine': '@mui/styled-engine-sc'
+ }
+ }
+})
From f4f8384cef8462286dc973a98f4410aa3cc37fb7 Mon Sep 17 00:00:00 2001
From: Aransiola Ayodele <36636824+CodeLeom@users.noreply.github.com>
Date: Wed, 26 Feb 2025 23:52:39 +0100
Subject: [PATCH 9/9] doc: update styled-component page with vite example links
---
.../integrations/styled-components/styled-components.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/data/material/integrations/styled-components/styled-components.md b/docs/data/material/integrations/styled-components/styled-components.md
index b03658bf2ce3e3..3e36d65aa6465f 100644
--- a/docs/data/material/integrations/styled-components/styled-components.md
+++ b/docs/data/material/integrations/styled-components/styled-components.md
@@ -102,8 +102,8 @@ We provide boilerplate examples of Create React App with Material UI and styled
-- [Material UI + CRA + styled-components (JavaScript)](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components)
-- [Material UI + CRA + styled-components (TypeScript)](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
+- [Material UI + Vite + styled-components (JavaScript)](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-styled-components)
+- [Material UI + Vite + styled-components (TypeScript)](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-styled-components-ts)
:::warning
`@emotion/react`, `@emotion/styled`, and `styled-components` are optional peer dependencies of `@mui/material`, so you need to install them yourself.