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-ts/public/vite.svg b/examples/material-ui-vite-styled-components-ts/public/vite.svg similarity index 100% rename from examples/material-ui-vite-ts/public/vite.svg rename to examples/material-ui-vite-styled-components-ts/public/vite.svg 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-ts/src/vite-env.d.ts b/examples/material-ui-vite-styled-components-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-styled-components-ts/src/vite-env.d.ts 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`. + +[![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), 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' + } + } +}) diff --git a/examples/material-ui-vite-tailwind-ts/.gitignore b/examples/material-ui-vite-tailwind-ts/.gitignore new file mode 100644 index 00000000000000..a547bf36d8d11a --- /dev/null +++ b/examples/material-ui-vite-tailwind-ts/.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-ts/README.md b/examples/material-ui-vite-tailwind-ts/README.md similarity index 74% rename from examples/material-ui-vite-ts/README.md rename to examples/material-ui-vite-tailwind-ts/README.md index 8010dd0c83068b..8a531a2377eddf 100644 --- a/examples/material-ui-vite-ts/README.md +++ b/examples/material-ui-vite-tailwind-ts/README.md @@ -1,4 +1,4 @@ -# Material UI - Vite.js in TypeScript example +# Material UI - Vite example in TypeScript ## How to use @@ -22,18 +22,21 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-vite-ts) - [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-vite-ts) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-vite-ts) + ## The idea behind the example -This example uses [Vite.js](https://github.com/vitejs/vite). + + +This example demonstrates how you can use Material UI with [Vite](https://github.com/vitejs/vite) in [TypeScript](https://github.com/Microsoft/TypeScript). It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v6. +If you prefer, you can [use styled-components instead](https://next.mui.com/material-ui/integrations/interoperability/#styled-components). ## 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. +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-tailwind-ts/eslint.config.js b/examples/material-ui-vite-tailwind-ts/eslint.config.js new file mode 100644 index 00000000000000..092408a9f09eae --- /dev/null +++ b/examples/material-ui-vite-tailwind-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 }, + ], + }, + }, +) diff --git a/examples/material-ui-vite-ts/index.html b/examples/material-ui-vite-tailwind-ts/index.html similarity index 76% rename from examples/material-ui-vite-ts/index.html rename to examples/material-ui-vite-tailwind-ts/index.html index 2ab65b47357698..a69acc79e02f3f 100644 --- a/examples/material-ui-vite-ts/index.html +++ b/examples/material-ui-vite-tailwind-ts/index.html @@ -1,9 +1,10 @@ - + - + + Vite + Material UI + TS + Tailwind CSS @@ -11,7 +12,6 @@ rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" /> - Vite + Material UI + TS
diff --git a/examples/material-ui-vite-tailwind-ts/package.json b/examples/material-ui-vite-tailwind-ts/package.json new file mode 100644 index 00000000000000..d4cc28be578094 --- /dev/null +++ b/examples/material-ui-vite-tailwind-ts/package.json @@ -0,0 +1,34 @@ +{ + "name": "material-ui-vite-ts", + "private": true, + "version": "6.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc -b && vite build", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@mui/material": "^6.4.6", + "@tailwindcss/vite": "^4.0.9", + "react": "^19.0.0", + "react-dom": "^19.0.0", + "tailwindcss": "^4.0.9" + }, + "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-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-tailwind-ts/public/vite.svg b/examples/material-ui-vite-tailwind-ts/public/vite.svg new file mode 100644 index 00000000000000..e7b8dfb1b2a60b --- /dev/null +++ b/examples/material-ui-vite-tailwind-ts/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/material-ui-vite-ts/src/App.tsx b/examples/material-ui-vite-tailwind-ts/src/App.tsx similarity index 53% rename from examples/material-ui-vite-ts/src/App.tsx rename to examples/material-ui-vite-tailwind-ts/src/App.tsx index 80c7cf266bf5af..b5fd56f6948a3b 100644 --- a/examples/material-ui-vite-ts/src/App.tsx +++ b/examples/material-ui-vite-tailwind-ts/src/App.tsx @@ -1,8 +1,5 @@ -import * as React from 'react'; -import Container from '@mui/material/Container'; -import Typography from '@mui/material/Typography'; -import Box from '@mui/material/Box'; -import Link from '@mui/material/Link'; +import { Container, Typography, Link, Slider } from '@mui/material'; +import PopoverMenu from './PopOverMenu'; import ProTip from './ProTip'; function Copyright() { @@ -18,7 +15,8 @@ function Copyright() { Your Website {' '} - {new Date().getFullYear()}. + {new Date().getFullYear()} + {'.'} ); } @@ -26,13 +24,20 @@ function Copyright() { export default function App() { return ( - +
- Material UI Vite.js example in TypeScript + Material UI Vite example with Tailwind CSS in TypeScript + + - +
); -} +} \ No newline at end of file diff --git a/examples/material-ui-vite-tailwind-ts/src/PopOverMenu.tsx b/examples/material-ui-vite-tailwind-ts/src/PopOverMenu.tsx new file mode 100644 index 00000000000000..eb8991d43ec086 --- /dev/null +++ b/examples/material-ui-vite-tailwind-ts/src/PopOverMenu.tsx @@ -0,0 +1,43 @@ +import { Button, Menu, MenuItem } from '@mui/material'; +import * as React from 'react'; + +export default function PopoverMenu() { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + + return ( + + + + + Small Item + + + Large Item + + + + ); +} \ 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-tailwind-ts/src/vite-env.d.ts b/examples/material-ui-vite-tailwind-ts/src/vite-env.d.ts new file mode 100644 index 00000000000000..11f02fe2a0061d --- /dev/null +++ b/examples/material-ui-vite-tailwind-ts/src/vite-env.d.ts @@ -0,0 +1 @@ +/// 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()], -});