I have a TextField component for template. now I want to use it in other components and can change style of template in that components
in this project I use functional component and react-redux
Related
I have react component <MyComponent text="Hello">.
I'm adding this component from the Froala toolbar .
How to make react pickup this element/component and render it properly?
I have an app with html:
<div id="react-root-navbar"></div>
<div id="react-root-body"></div>
and corresponding React components that call React.DOM.render on each div.
Both React components use Material UI components. Thus, a set of inline styles are injected for each component.
The problem is that all styles for the second component will be further down in the HTML than for the first component, thus these CSS rules will be higher priority. This interrupts the intended cascading flow and results in lots of incorrect styling. For example, .MuiAppBar-colorPrimary is overruled by .MuiPaper-root:
I know that the ideal solution would be to have all components within a single React app and prevent duplciate imports in the first place. This isn't possible with the codebase I'm working with, however, which uses a Django frontend migrating one piece at a time to React.
Is there any way to make the styling exported by Material UI for each component scoped specifically to that component, so that the styles do not overwrite each other?
MUI has a component StylesProvider that allows you to adjust how styles are added. StylesProvider has a prop generateClassName to which you can pass a generator to determine how class names are generated.
You can create a generator using a MUI function createGenerateClassName, to which you can pass the option disableGlobal to add simple suffixes to class names so that each app will have scoped CSS applied to it.
I was already wrapping all MUI components in a component MUIThemeProvider to use the MUI component ThemeProvider. I just added StylesProvider to this wrapper:
const generateClassName = createGenerateClassName({
disableGlobal: true,
});
return (
<StylesProvider generateClassName={generateClassName}>
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
</StylesProvider>
)
render my parent component without passing down function in props
I have some components like this
<MainComponent>
<Component1>
<Component2>
<Component3>
</Component3>
</Component2>
</Component1>
</MainComponent>
I want change state of MainComponent inside Component3 without passing down props
You can do that with a state management framework Redux
check how you can do this https://redux.js.org/basics/usage-with-react
Redux will allow you to manage state between components without passing it in the props.
I am using MaterialUI for React. It has some transition components like Fade, Slide etc.
Is there a way to trigger those transitions when a component gets mounted or unmounted?
I have a react app, I would like to process react components and modify classNames before they are rendered to DOM. Is there any way to do that?
For example transform <div className='bg-primary' /> to <div className='background-blue' />.