Deprecated react removal

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 <script>, <style>, and stylesheet <link> tags, and injects a meta tag:
+
+```html
+<meta property="csp-nonce" nonce="PLACEHOLDER" />
+```
+
+> Replace PLACEHOLDER with a unique nonce per request.
+
+* Asset Inlining:
+
+Vite inlines small assets as data URIs by default. For CSP, allow `data:` for safe directives like `img-src` and `font-src`, but never for `script-src`. Alternatively, disable inlining by setting build.`assetsInlineLimit: 0`.
+
+This configuration keeps your Vite project CSP-compliant without requiring inline runtime scripts.
 
 ### styled-components
 

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md

@@ -156,34 +156,52 @@
 Future changes to the library's internal structure could break these paths. `babel-plugin-direct-import` allows for granular control over what gets imported, but it comes with the potential risk of relying on internal library paths. This may fail in future versions if the package is updated to use the `exports` field in `package.json`, which could block access to internal paths like this.
 :::
 
-If you are using Create React App, you will need to use a couple of projects that let you use `.babelrc` configuration, without ejecting.
+> Note that Material UI supports tree shaking out of the box when importing from specific paths (e.g. @mui/material/Button), so this configuration is optional and primarily useful if you want to enforce modular imports.
 
-`yarn add -D react-app-rewired customize-cra`
+Vite doesn’t require extra Babel configuration by default because it uses esbuild for fast bundling and minification. However, if you need to customize Babel (for example, to use babel-plugin-import), here’s a way to do it:
 
-Create a `config-overrides.js` file in the root directory:
+Install Dependencies
 
-```js
-/* config-overrides.js */
-/* eslint-disable react-hooks/rules-of-hooks */
-const { useBabelRc, override } = require('customize-cra');
-
-module.exports = override(useBabelRc());
+```bash
+npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-plugin-transform-imports
 ```
 
-If you wish, `babel-plugin-import` can be configured through `config-overrides.js` instead of `.babelrc` by using this [configuration](https://github.com/arackaf/customize-cra/blob/master/api.md#fixbabelimportslibraryname-options).
+Create a `.babelrc` file in the root directory:
 
-Modify your `package.json` commands:
+```json
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    [
+      "babel-plugin-transform-imports",
+      {
+        "@mui/material": {
+          "transform": "@mui/material/${member}",
+          "preventFullImport": true
+        },
+        "@mui/icons-material": {
+          "transform": "@mui/icons-material/${member}",
+          "preventFullImport": true
+        }
+      }
+    ]
+  ]
+}
+```
 
-```diff
-   "scripts": {
--    "start": "react-scripts start",
--    "build": "react-scripts build",
--    "test": "react-scripts test",
-+    "start": "react-app-rewired start",
-+    "build": "react-app-rewired build",
-+    "test": "react-app-rewired test",
-     "eject": "react-scripts eject"
-  }
+Update your `vite.config.js` to use the Babel plugin:
+
+```js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import babel from 'vite-plugin-babel';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    babel()
+  ]
+});
 ```
 
 Enjoy significantly faster start times.

docs/data/material/guides/typescript/typescript.md

@@ -6,7 +6,7 @@
 
 <!-- #repo-reference -->
 
-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`:
 

docs/data/material/integrations/interoperability/interoperability.md

@@ -274,8 +274,8 @@ If, however, you would like to use styled-components, you can configure your app
 
 <!-- #repo-reference -->
 
-- [Create React App with styled-components](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components)
-- [Create React App with styled-components and TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
+- [Vite with styled-components](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-styled-components)
+- [Vite with styled-components and TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-styled-components-ts)
 
 Following this approach reduces the bundle size, and removes the need to configure the CSS injection order.
 
@@ -582,7 +582,7 @@ It works exactly like styled components. You can [use the same guide](/material-
 
 <!-- #repo-reference -->
 
-If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) example project.
+If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-tailwind-ts) example project.
 If you use a different framework, or already have set up your project, follow these steps:
 
 1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation/framework-guides.
@@ -596,7 +596,7 @@ If you use a different framework, or already have set up your project, follow th
  };
 ```
 
-3. Add the `important` option, using the id of your app wrapper. For example, `#__next` for Next.js and `"#root"` for CRA:
+3. Add the `important` option, using the id of your app wrapper. For example, `#__next` for Next.js:
 
 ```diff title="tailwind.config.js"
  module.exports = {

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
 
 <!-- #repo-reference -->
 
-- [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.

docs/data/material/migration/migration-v4/migrating-from-jss.md

@@ -392,7 +392,7 @@ See [this tss-react doc](https://docs.tss-react.dev/api/makestyles#naming-the-st
 
 You may end up with eslint warnings [like this one](https://user-images.githubusercontent.com/6702424/148657837-eae48942-fb86-4516-abe4-5dc10f44f0be.png) if you deconstruct more than one item.
 
-Don't hesitate to disable `eslint(prefer-const)`, [like this](https://github.com/thieryw/gitlanding/blob/b2b0c71d95cfd353979c86dfcfa1646ef1665043/.eslintrc.js#L17) in a regular project, or [like this](https://github.com/InseeFrLab/onyxia/blob/a264ec6a6a7110cb1a17b2e22cc0605901db6793/package.json#L133) in a CRA.
+Don't hesitate to disable `eslint(prefer-const)`, [like this](https://github.com/thieryw/gitlanding/blob/b2b0c71d95cfd353979c86dfcfa1646ef1665043/.eslintrc.js#L17) in a regular project.
 
 #### withStyles()
 

docs/src/modules/components/MaterialUIExampleCollection.js

@@ -42,17 +42,9 @@ const examples = [
     src: '/static/images/examples/remix.svg',
   },
   {
-    name: 'Create React App',
-    label: 'View JavaScript',
-    tsLabel: 'View TypeScript',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra',
-    tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-ts',
-    src: '/static/images/examples/cra.svg',
-  },
-  {
-    name: 'Tailwind CSS + Create React App',
+    name: 'Tailwind CSS + Vite',
     label: 'View TypeScript',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts',
+    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-tailwind-ts',
     src: '/static/images/examples/tailwindcss.svg',
   },
   {

examples/material-ui-vite-styled-components-ts/README.md

@@ -0,0 +1,42 @@
+# Material UI - Vite example with styled-components in TypeScript
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui/material-ui):
+
+<!-- #repo-reference -->
+
+```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-ts
+cd material-ui-vite-styled-components-ts
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+## CodeSandbox
+
+<!-- #repo-reference -->
+
+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-ts).
+
+<!-- #host-reference -->
+
+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`.
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](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) with [styled-components](https://styled-components.com/) as a style engine for your application using TypeScript.
+
+## What's next?
+
+<!-- #host-reference -->
+
+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.

examples/material-ui-vite-styled-components-ts/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

examples/material-ui-vite-styled-components-ts/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Material UI + TS + Styled components</title>
+    <!-- Fonts to support Material Design -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

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"
+  }
+}

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 (
+    <div>
+      <h1>Hello Material UI with Styled-Components in TypeScript</h1>
+      <CustomButton variant="contained">
+        Styled Button
+      </CustomButton>
+    </div>
+  );
+};
+
+export default App;

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(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

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"]
+}

examples/material-ui-vite-styled-components-ts/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}