I am working in a codebase where over time, we have done many changes to our pages and components thus resulting in a lot of styles that are now not being used. We would like to clean up our codebase and remove any unused makeStyles properties.
Our styles are being imported from a separate file. For example:
container.styles.ts
import { makeStyles } from "#material-ui/core";
export const useStyles = makeStyles({
container: {
backgroundColor: "white",
...
},
oldContainerStyle1: { ... },
oldContainerStyle2: { ... },
oldContainerStyle3: { ... },
oldComponentStyle1: { ... },
...
},
});
container.tsx
import React, { FC } from "react";
import { useStyles } from "./container.styles";
interface IProps {
...
}
export const AutoCompleteContainer: FC<IProps> = ({...}) => {
const classes = useStyles();
return (
<div className={classes.container}>
...
)
}
We are using tslint and have looked into seeing if it is possible but we still cannot seem to find an answer on this issue.
Install this dependency https://github.com/jens-ox/eslint-plugin-material-ui-unused-classes
not sure for tslint.
Related
I want to use vue3-cookies in my custom plugin, but whatever I do I keep getting undefined.
MyPlugin.js
export default {
install: (app, options) => {
app.config.globalProperties.$MyPlugin= {
someFunction() {
console.log(app.cookie);
console.log(app.cookies);
console.log(app.$cookies);
}
}
},
};
app.js
import {createApp} from 'vue';
import VueCookies from 'vue3-cookies'
import MyPlugin from "./plugins/MyPlugin";
const app = createApp({});
app.use(VueCookies)
app.use(MyPlugin)
const mountedApp = app.mount('#app');
What am I missing or doing wrong?
OK, I clearly missed a piece while reading the documentation.
This did the trick.
https://github.com/KanHarI/vue3-cookies#usage---via-composition-api-recommended
import {useCookies} from "vue3-cookies";
export default {
install: (app, options) => {
app.config.globalProperties.$MyPlugin = {
someFunction() {
const {cookies} = useCookies();
console.log(cookies.get('cookie_name'));
}
}
},
};
I am getting this error when compiling in Layout.js
My code:
import { makeStyles } from '#material-ui/core';
const useStyles = makeStyles({
page: {
background: '#f9f9f9',
width:'100%'
},
drawer:{
width: drawerWidth
}
});
From the error it is clear that makeStyles is not available in the dependency #material-ui/core.
Use the line below instead to fix the issue where makeStyles is imported from #material-ui/core/styles
import { makeStyles } from '#material-ui/core/styles';
I currently have lots of dialogs and want to change DialogTitle to have Typography h5 heading. Currently this works:
<DialogTitle>
<Typography variant="h5">Create Exercise</Typography>
</DialogTitle>
But I want this to be applied to all dialogs without having to add use the typography component. I also have tried the following with createTheme, but this does not change the fontSize.
const theme = createTheme({
components: {
MuiDialogTitle: {
styleOverrides: {
root: {
// Set this to h5
fontSize: "1.5rem",
},
},
},
},
});
Modify the DialogTitle component as mention below 👇
import MuiDialogTitle from "#material-ui/core/DialogTitle";
import Typography from "#material-ui/core/Typography";
import { withStyles } from "#material-ui/core/styles";
const styles = (theme) => ({
root: {
margin: 0,
padding: theme.spacing(2),
},
});
const DialogTitle = withStyles(styles)((props) => {
const { children, classes, ...other } = props;
return (
<MuiDialogTitle disableTypography className={classes.root} {...other}>
<Typography variant="h5">{children}</Typography>
</MuiDialogTitle>
);
});
export default DialogTitle;
use this component as DialogTitle, even you can modify the style and also able to add extra component into DialogTitle, like closing icon or some secondary title.
I have a header and want to style all of it's buttons differently than my global theme. I have tried using a child theme like:
<ThemeProvider
theme={(outerTheme) =>
_.merge(outerTheme, {
overrides: {
MuiButton: {
label: {
color: "#fff",
},
},
},
})
}
>
However, while I had expected this to override only MuiButton's in the child theme, it overrode them in them globally.
I know I can use makeStyles but, then, as far as I know, I have to reference it in all the child components which want to use the style. I'd like to wrap a higher level component and have all child components pick up the style. How is this done?
You can do this:
import Button from '#material-ui/core/Button';
import { purple } from '#material-ui/core/colors';
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
header: {
"& button": {
marginRight: theme.spacing(1),
color: theme.palette.getContrastText(purple[500]),
backgroundColor: purple[500],
"&:hover": {
backgroundColor: purple[700],
},
},
},
});
function CustomHeader(props) {
const classes = useStyles();
return (
<div className={classes.header}>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button disabled>Button 3</Button>
</div>
)
};
Thinking of the concept of a SASS mixin, what would be the best approach to enable the re-use of style blocks that incorporate the current theme.
For example I have two components that import their respective styles:
Component 1
index
styles
Component 2
index
styles
Each component has a text block
Component 1
import { styles } from './styles'
....
<div className={classes.richText}>...</div>
Component 2
import { styles } from './styles'
....
<div className={classes.richText}>...</div>
The styles for richText are the same but I would rather not duplicate them in the imported styles file.
I would rather have a single file that exposes reusable CSS properties based on the theme.
The only way I can currently do this is by returning an object that I have passed the theme to e.g.
const RichText = (theme) => {
return {
fontWeight: 100,
color: theme.typography.body1.color
}
}
Then import this into the styles
Component 1
styles.js
import { RichText } from '../mixins/'
const styles = theme => ({
richText: {
...RichText(theme),
fontSize: '1rem'
}
Component 2
styles.js
import { RichText } from '../mixins/'
const styles = theme => ({
richText: {
...RichText(theme),
fontSize: '1.2rem'
}
Feels like there has to be a better way: utilising withTheme() maybe?
Let's say you want to custom a checkbox as below:
import { makeStyles } from '#material-ui/core/styles';
import CheckBox from '#material-ui/core/CheckBox';
const useStyles = makeStyles((theme) => ({
root: {
color: theme.status.danger,
'&$checked': {
color: theme.status.danger,
},
},
checked: {},
}));
function CustomCheckbox() {
const classes = useStyles();
return (
<Checkbox
defaultChecked
classes={{
root: classes.root,
checked: classes.checked,
}}
/>
);
}
And you want to reuse its style as many components as you can.
You have two options: ThemeProvider or export your custom style.
Changing the component's theme
Themes let you apply a consistent tone to your app. It allows you to customize all design aspects of your project in order to meet the specific needs of your business or brand.
import { createMuiTheme, ThemeProvider } from '#material-ui/core/styles';
import orange from '#material-ui/core/colors/orange';
const myTheme = createMuiTheme({
status: {
danger: orange[500],
},
});
export default function CustomStyles() {
return (
<ThemeProvider theme={myTheme}>
<CustomCheckbox />
</ThemeProvider>
);
}
Exporting your custom styles
Separate your components in a proper folder, i.e: ./assets/styles:
import { makeStyles } from '#material-ui/core/styles';
export const useCheckBoxStyles = makeStyles((theme) => ({
root: {
color: theme.status.danger,
'&$checked': {
color: theme.status.danger,
},
},
checked: {},
}));
And your components tree ./components:
import { useCheckBoxStyles } from './assets/styles';
function CustomCheckbox() {
const classes = useCheckBoxStyles();
return (
<Checkbox
defaultChecked
classes={{
root: classes.root,
checked: classes.checked,
}}
/>
);
}
References
https://material-ui.com/customization/theming