How to separate MUI setup to an external js file? - reactjs

Question

I have this MUI codes that are applied to multiple components. I want to separate it into a single file like 'MuiSetup.js' and then import the file to the component that I am using. I've tried with as React component, however, it does not work and I have zero clues how can I do this.
// Styling TextField
const ValidationTextField = withStyles({
root: {
'& input:valid + fieldset': {
borderColor: '#ff9800',
borderWidth: 1,
},
'& .MuiOutlinedInput-root': {
'&:hover fieldset': {
borderColor: '#ff9800',
},
'&.Mui-focused fieldset': {
borderColor: '#ff9800',
},
},
'& input:invalid + fieldset': {
borderColor: '#ff9800',
borderWidth: 1,
backgroundColor: 'black',
},
'& input:valid:focus + fieldset': {
borderColor: '#ff9800',
borderLeftWidth: 5,
padding: '4px !important', // override inline-style
},
},
})(TextField);
//Style MUI
const useStyles = makeStyles((theme) => ({
root: {
height: '100vh',
backgroundColor: 'black',
},
input: {
color: '#ff9800',
},
formBackground: {
background: 'black',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
},
paper: {
margin: theme.spacing(8, 4),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
},
form: {
width: '100hv',
height: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(0),
color: '#ff9800',
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
//Label Style
const useLabelStyles = makeStyles({
root: {
color: '#ff9800',
'&.Mui-focused': {
color: '#ff9800',
},
fontSize: '14px',
},
});
-----------
const App = () => {......}
export default App
How can I take the MUI part to the separated file?

Answer 1

In one of my projects I actually used createMuiTheme() in another file then added my own classes under the overrides. Then the entire app is wrapped in the ThemeProvider which you pass in your custom theme. Then you can just give the component a className.
So my MuiSetup.js equivalent file looks something like this:
import { createMuiTheme } from '#material-ui/core';
// Describe material ui theme
export const customTheme = (isDark = false) => {
return createMuiTheme({
palette: isDark
? {
common: {...},
background: {...},
primary: {...},
secondary: {...},
error: {...},
text: {...},
}
: {// Light theme stuff},
overrides: {
MuiAppBar: {...},
MuiButton: {
// Button example...
root: {
'&.CustomButton': {
margin: 0,
},
'&.OtherCustomButton': {
width: '100%',
minHeight: 'inherit',
},
'&$disabled': {
color: grey[600],
},
},
outlinedSecondary: {
'&$disabled': {
border: `1px solid ${grey[600]}`,
},
},
},
// Other mui components...
},
});
};
You'll need to read the API docs to find your inputs.
Then the ThemeProvider:
import React, { Component } from 'react';
import { ThemeProvider } from '#material-ui/core';
import { customTheme } from './MuiSetup.js';
class App extends Component {
render() {
const currentTheme = customTheme(true);
return (
<ThemeProvider theme={currentTheme}>
<h1>My app</h1>
// Usage
<Button className='CustomButton'/>
</ThemeProvider>
);
}
}
export default App;
Then from any component within the app, you can do: <Button className='CustomButton'/> as I've done above.
Not sure if this is the best way, might be a bit tricky to make multiple updates however you could do something similar in your situation and create a function in another file that returns your custom makeStyles.
HTH

Answer 2

Ciao, to put these customizations in a separated file is just necessary to define them in aseparated file with the key "export const ..." and then, when you want to import them, just write:
import { ValidationTextField } from "./muiCustomizations"; // supposing that you defined your customizations in a file called muiCustomizations.js
and then you can use them:
function MyComponent() {
return (
<div>
<ValidationTextField />
</div>
);
}
Here a codesandbox example.