Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Host CodeSandbox on MUI org #35110

Merged
merged 1 commit into from Nov 15, 2022
Merged

[docs] Host CodeSandbox on MUI org #35110

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 9 additions & 6 deletions docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md
View file
Open in desktop
Expand Up @@ -32,7 +32,8 @@ import {
import { extendTheme as extendJoyTheme } from '@mui/joy/styles';

const joyTheme = extendJoyTheme({
// This is required to point to `var(--mui-*)` because we are using `CssVarsProvider` from Material UI.
// This is required to point to `var(--mui-*)` because we are using
// `CssVarsProvider` from Material UI.
cssVarPrefix: 'mui',
colorSchemes: {
light: {
Expand Down Expand Up @@ -79,8 +80,9 @@ const joyTheme = extendJoyTheme({
},
});

// Note: you can't put `joyTheme` inside Material UI's `extendMuiTheme(joyTheme)` because
// some of the values in the Joy UI theme refers to CSS variables abd not raw colors.
// Note: you can't put `joyTheme` inside Material UI's `extendMuiTheme(joyTheme)`
// because some of the values in the Joy UI theme refers to CSS variables and
// not raw colors.
const muiTheme = extendMuiTheme();

// You can use your own `deepmerge` function.
Expand All @@ -100,7 +102,7 @@ export default function App() {

Visit the following CodeSandbox to preview this use case setup.

[![Edit Joy UI in a Material UI project](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/material-ui-feat-joy-ui-eph5gi?fontsize=12&module=%2Fdemo.tsx&moduleview=1&theme=dark)
[![Edit Joy UI in a Material UI project](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/material-ui-feat-joy-ui-vvvv59?file=/demo.tsx)

## Case B: Material UI in a Joy UI project

Expand All @@ -117,7 +119,8 @@ import {
} from '@mui/joy/styles';

const muiTheme = extendMuiTheme({
// This is required to point to `var(--joy-*)` because we are using `CssVarsProvider` from Joy UI.
// This is required to point to `var(--joy-*)` because we are using
// `CssVarsProvider` from Joy UI.
Comment on lines 121 to +123
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These comment changes are to remove the horizontal scrollbar.

cssVarPrefix: 'joy',
colorSchemes: {
light: {
Expand Down Expand Up @@ -200,7 +203,7 @@ export default function App() {

Visit the following CodeSandbox to preview this use case setup.

[![Edit Material UI in a Joy UI project](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/joy-ui-feat-material-ui-cy4nj7?fontsize=12&hidenavigation=1&module=%2Fdemo.tsx&theme=dark)
[![Edit Material UI in a Joy UI project](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/joy-ui-feat-material-ui-k86j2j?file=/demo.tsx)

## TypeScript setup

Expand Down