I've been trying to get Material UI components to work inside an Iframe. Material UI has provided a DemoFrame component for this purpose (https://github.com/mui-org/material-ui/blob/master/docs/src/modules/components/DemoFrame.js), but the styles does not get inserted into the Iframe properly. I've created a code sandbox to demonstrate this. Am I missing something here?
https://codesandbox.io/s/rykq8nz4j4
Update:
The demo frame seems to be working correctly in the component demos in material-ui web site. If I look at the source I can see the styles have been injected correctly.
But in my demo the styles does not get injected into the iframe.
Got it to work after updating the packages to the latest versions and adding the following lines to install the material ui styles.
import { install } from "#material-ui/styles";
install();
Demo: https://codesandbox.io/s/rykq8nz4j4
Related
I'm porting to typescript this awesome project
https://github.com/codingmonk-yt/chat-app
it's a boilerplate starter for a modern chat webapp
built with material ui, where it customize extensively the default material theme
i'm not very familiar with react and material ui, truth be told, so i don't understand what am i doing wrong, i have a typescript issue when i try to migrate a styled component with its typescript version
i built a stackblitz that reproduces the issue, in the file Settings.tsx
https://stackblitz.com/edit/react-material-ui-typescript-45rmey?file=components%2FSettings.tsx,components%2FApp.tsx,theme%2Findex.tsx
as you can see i want to be able to propagate the customtheme, both inside the styledcomponent and on its sx property, but whatever i try it ends up with some typescript issue
any pointer will be greatly appreciated
I'm working on a project that's using the Carousel from react-bootstrap. This only works if I import "bootstrap/dist/css/bootstrap.min.css"; in the app. The issue is that doing so changes the CSS for the entire app, which has lots of existing UI that I would then need to rework. Is there a way to use the bootstrap CSS for the carousel component only, leaving the rest of my React app alone?
I've tried importing bootstrap.min.css in the file where the carousel component is used rather than in App.js. This doesn't seem to make a difference though.
Solution 1:
Bootstrap provides the option to include components selectively with scss. This requires you to have a build setup that handles scss for you, e.g. webpack, rollup or node-sass itself.
Edit: added minimal set of required scss classes. bootstrap 4.5
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/_variables";
#import "../node_modules/bootstrap/scss/_mixins";
#import "~bootstrap/scss/_carousel.scss";
The code snippet shows the main part which is required for styling the carousel. But if you have a look at the carousel.scss there are various dependencies to bootstrap functions you would have to import as well. With that it is possible to have a minimal bootstrap configuration with your required styles.
Solution 2: You might scope the component and its styles within a web component. That way the bootstrap.min.css is not leaking styles out of the carousel web component. This approach goes beyond the question and does not consider how the carousel works together with the rest of your application, as also events and JS interactions would be scoped.
I have my portfolio in which the styles are not being added to the styles tag. On further inspection, I saw that I can see the styles when I view the page source.
but when I open Chrome Dev Tools I do not see the styles being injected.
.
Any help will be appreciated. A live demo can be seen here and the repo can be found here
In production, styled-components injects styles using CSSOM api, while Chrome DevTools doesn't support handle it.
You can get more discussions via https://bugs.chromium.org/p/chromium/issues/detail?id=387952
In development, everything is ok.
I have been having some trouble getting the Material-UI expansion panels on my React application to expand once the "expand more" icon has been clicked. I have used the documentation on the Material UI website and set up the react application using npx create-react-app. Below I have attached the code of my component and my package.json. The website displays the panel with the correctly mapped data, but the panel does not expand once clicked. Through some research I read that the latest MacOS update has been having some bugs with css frameworks and animation. Has anyone else experienced this issue? I'm not sure at this point what is causing the error.
package.json
component imports and styling
website display
component render
I think you need to change the onClick props in <ExpansionPanel /> for onChange.
But i have a problem like
Since version 4 material ui started wrapping all their components with forwardRef. In my testcafe tests I was relying on the "testcafe-react-selectors" library to select components based on their name. So e.g.
export namespace TimeSlotListPage {
export const TimeSlotList = ReactSelector('TimeSlotList');
export const TimeSlotListItem: Selector = ReactSelector('ListItem');
}
Now with version 4 the document appears as ForwardRef(List) in the react- dev-tools, but selecting for this with ReactSelector('ForwardRef(List)') does not work and neither does ReactSelector('MergeListContext'). Is there a workaround for this?
As we didn't face any issues with the unreleased Material UI v4 framework, we would need to research it thoroughly.
I would appreciate it if you prepare a simple project that demonstrates the issue and create a separate bug report in the TestCafe repository using the following form.