Comments (5)
This issue looks a lot like #13799
It's funny to see 2 issues related to Joy in such a small amount of time.
@michelengelen the issues here seems very related to Joy UI, not sure if we can document something more general, and given the current trend with Joy UI not sure it's worth investing time in it either 😬
We have an ongoing OKR about supporting other Design System, I would be in favor of advancing in this direction rather than documenting the current state of things (which sucks to be honest).
We could link to this page in our demos that use Joy UI, but I would not invest to much time building a complex demo that would probably because outdated in the coming months.
from mui-x.
I completely agree with @flaviendelangle on this one.
Let's add a link to the Joy page in the relevant docs, but in the current state, I would like to keep relying on the search for discoverability. 🤔
from mui-x.
Hello @shahzebgit.
Could you please check our demo using Joy UI as a reference for configuration?
Please also check this documentation for more information about using @mui/material
and @mui/joy
together.
Does it help you resolve the problem? 🤔
from mui-x.
Hello @LukasTy ,
Could you please check our demo using Joy UI as a reference for configuration?
Oh, nice this actually works pretty well.
Thank you, could be a good way to mention this in Date Picker docs.
if people are using Joy UI
used MaterialCssVarsProvider
at top level to sync the theme too.
App.js
import { Experimental_CssVarsProvider as MaterialCssVarsProvider } from '@mui/material/styles';
import { extendTheme as extendJoyTheme, THEME_ID } from '@mui/joy/styles';
const joyTheme = extendJoyTheme();
export default function App () {
return (
<MaterialCssVarsProvider>
<CssVarsProvider theme={{ [THEME_ID]: joyTheme }}>
<CssBaseline />
<Router>
<Box sx={{ display: 'flex', minHeight: '100dvh' }}>
<Header />
<Sidebar />
<Routes>
<Route path="/" element={<Navigate to="/listing" replace />} />
<Route path="/home" element={<MainContent title="Home"><Development /></MainContent>} />
<Route path="/dashboard" element={<MainContent title="Dashboard"><Development /></MainContent>} />
<Route path="/listing" element={<MainContent title="Listing"><OrderTable /></MainContent>} />
<Route path="/users" element={<MainContent title="Users"><Users /></MainContent>} />
</Routes>
</Box>
</Router>
</CssVarsProvider>
</MaterialCssVarsProvider>
);
}
from mui-x.
Would a dedicated section of using a different styling system be a thing @LukasTy ?
I agree that discoverability of this is not ideal atm
from mui-x.
Related Issues (20)
- [data grid] Select/deselect all is not working as expected in data grid premium with row grouping HOT 3
- [data grid] Customize grouping Rows HOT 10
- [TreeView] Use selectors on `TreeItem` instead of `instance` methods
- [pickers] The monthly label moves up with quickly switch between months HOT 5
- [DataGrid] Improve keyboard navigation based on the ARIA spec
- [data grid] Unexpected keyboard tab navigation behaviour within cells HOT 9
- [docs] Add a recipe for persisting filters on page refresh HOT 2
- [data grid] Add new rows on paste HOT 1
- @mui/x-license 7.12.1 not available HOT 1
- [data grid] Exception when printing styled Data Grid with hidden columns "Cannot read properties of null (reading 'cloneNode')" HOT 4
- [data grid] Editing row from example code not working HOT 1
- [data grid] Apply page level filtering once all filter are selected and click on button like 'Apply Filters' HOT 2
- [pickers] How to extend type for `slotProps`? HOT 3
- Date Time Range Picker HOT 1
- [data grid] Copy & Paste on Cells using localize keyboard HOT 3
- [data grid] Bundle size win opportunities
- [pickers] Customization DX, ideas
- [data grid] TanStack Query integration demos HOT 2
- [tree view] `apiRef` type is `Partial<{}>` which causes Typescript compilation to fail HOT 5
- [pickers][DatePicker] Calendar not fully displayed and next arrow unresponsive HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.