I have my own theme, I can theming well.
Right now I have three different styles with material UI tabs. That's why I need to change styles using makeStyles.
This is example of tab I need to change
...
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.pallete.primary
},
tabs: {
/// some styles
}
...
}
));
...
<Tabs
...someProps
className={classes.tabs}
>
element inside tab have such classes:
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorSecondary Mui-selected MuiTab-labelIcon">
I have tried to edit styles the same way as
... = createMuiTHeme ({
overrides: {
...some overrides
}
in my case:
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: "#121D42",
MuiButtonBase: {
root: {
///some styles
},
}
},
...
but it doesn't work with makeStyles
So how can I edit buttons inside tabs using makeStyles(), is it possible? Or help me with solution please
I have found a solution for now.
Using Styled Components and with creating a styled element - we can change styles easier. We should StylesProvider
const NewButton = styled(({styledComponentProp, ...rest}) => (
<Button classes={{label: 'label'}} {...rest}/>
))`
.label {
color: blue;
font-size: ${props => props.styledComponentProp};
}
`
export const BlueButton = styled(props => {
return (
<StylesProvider injectFirst>
<NewButton variant="contained" styledComponentProp="20px"> Red Labeled Button </NewButton>
</StylesProvider>
);
})`
`;
But have we any better solutions?
Related
I'm using V4 MUI Chip component with size : 'small' and variant: 'outlined' with a deleteIcon specified.
https://v4.mui.com/components/chips/
I'd like to override the margin-right property of the deleteIcon but I'm having trouble getting the right specificity, because MUI is applying more specific styles.
The following styles are applied to the delete icon by MUI:
.MuiChip-outlined-253 .MuiChip-deleteIconSmall-267 {
margin-right: 3px;
}
.MuiChip-outlined-253 .MuiChip-deleteIcon-266 {
margin-right: 5px;
}
How do I apply a style to override the margin-right of the deleteIcon and set it to e.g. '10px'?
You can use the class .MuiChip-deleteIcon based on the Chip api documentation (https://v4.mui.com/api/chip/)
Here is a working codesandbox to play with (has for the both default and outlined variants).
Here is the code to implement the change you want.
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Chip from "#material-ui/core/Chip";
import FaceIcon from "#material-ui/icons/Face";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
justifyContent: "center",
flexWrap: "wrap",
"& > *": {
margin: theme.spacing(0.5)
},
//Here is where you customise the css for the delete icon
"& .MuiChip-deleteIcon": {
marginRight: "20px", // Change those values to yours
},
//For customising the outlined the css for the delete icon
"& .MuiChip-outlined": {
"& .MuiChip-deleteIcon": {
marginRight: "10px", // Change those values to yours
}
}
}
}));
export default function Chips() {
const classes = useStyles();
const handleDelete = () => {
console.info("You clicked the delete icon.");
};
const handleClick = () => {
console.info("You clicked the Chip.");
};
return (
<div className={classes.root}>
<Chip label="Deletable primary" onDelete={handleDelete} color="primary" />
<Chip
icon={<FaceIcon />}
label="Deletable secondary"
onDelete={handleDelete}
color="secondary"
/>
<Chip
icon={<FaceIcon />}
label="Deletable secondary"
onDelete={handleDelete}
color="secondary"
variant="outlined"
/>
</div>
);
}
Another way would be to do something similar in the theme.
I am working on a small portfolio website, I've added an avatar, and trying to override it's style with makeStyles class, tho the Mui avatar root is overriding my class,
is this possible to do without the use of !important ?
export const HomePage = () => {
const classes = useStyles()
return (
<Grid container justifyContent="center">
<Avatar className={classes.headerAvatar} src={avatar} alt="" />
</Grid>
)
}
export const useStyles = makeStyles(theme => ({
headerAvatar: {
width: theme.spacing(13),
height: theme.spacing(13),
margin: theme.spacing(1)
},
}))
According to the docs, you can override the css style of the root class using the classes prop, like:
export const HomePage = () => {
const classes = useStyles()
return (
<Grid container justifyContent="center">
<Avatar classes={classes} src={avatar} alt="" />
</Grid>
)
}
export const useStyles = makeStyles(theme => ({
root: {
width: theme.spacing(13),
height: theme.spacing(13),
margin: theme.spacing(1)
},
}))
How can you use the #supports css rule in material ui makeStyles?
I tried to search that but didn't find anything describing how to include css rules like supports
Here is the styles I want to have:
#supports (display: grid) {
div {
display: grid;
}
}
I tried this but it didn't work:
const useStyles = makeStyles(() => ({
paper: {
'#supports': {
'(display: grid)': {
display: 'grid';
},
},
}
}))
The syntax for this is similar to the syntax for media queries. In your case, you would want the following:
const useStyles = makeStyles(() => ({
paper: {
'#supports (display: grid)': {
display: 'grid'
}
}
}))
Here's a working example:
import React from "react";
import Button from "#material-ui/core/Button";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
button: {
"#supports (background-color: red)": {
marginTop: theme.spacing(5),
backgroundColor: "red"
},
"#supports not (display: unsupportedvalue)": {
color: "white"
},
"#supports not (display: grid)": {
backgroundColor: "purple"
}
}
}));
export default function App() {
const classes = useStyles();
return (
<Button className={classes.button} variant="contained">
Hello World!
</Button>
);
}
Related answer:
How can I use CSS #media for responsive with makeStyles on Reactjs Material UI?
Related documentation:
https://cssinjs.org/jss-plugin-nested?v=v10.5.0#nest-at-rules
Just like you use media queries in the Mui, the same way you can make use of #support in it!
For example:
const useStyles = makeStyles((theme) => ({
grid: {
"#supports (display: grid)": {
display: "grid",
gridTemplateColumns: "1fr 1fr"
}
}
}));
Whole component will look like this:
import React from "react";
import { makeStyles } from "#material-ui/core";
function Grid() {
const useStyles = makeStyles((theme) => ({
grid: {
"#supports (display: grid)": {
display: "grid",
gridTemplateColumns: "1fr 1fr"
}
}
}));
const styles = useStyles();
return (
<div className={styles.grid}>
<div>Grid Item</div>
<div>Grid Item</div>
<div>Grid Item</div>
<div>Grid Item</div>
</div>
);
}
export default Grid;
And here's the working codesandbox example:
https://codesandbox.io/s/priceless-lamarr-olciu
I have a separate App.css file that has global css attributes and have classes for responsiveness. The issue is I want to render elements differently for separate devices but can't seem to figure out how to do that as using conditionals isn't applying as such.
import UserItem from "./UserItem";
import Spinner from "../layout/Spinner";
import PropTypes from "prop-types";
const Users = ({ users, loading }) => {
if (loading) {
return <Spinner />;
} else {
return (
<div style={userStyle} className='body'>
{users.map((user) => {
return <UserItem key={user.id} user={user} />;
})}
</div>
);
}
};
const windowWidth = window.innerWidth;
Users.propTypes = {
users: PropTypes.array.isRequired,
loading: PropTypes.bool.isRequired,
};
const userStyle = {
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
gridGap: "1rem",
};
export default Users;
My css #media query which I am trying to apply to effect change on a small device.
/* Mobile Styles */
#media (max-width: 700px) {
.hide-sm {
display: none;
}
}
How do I implement this #media css style so that it can render the page differents through jsx?
You can use material ui. that will fulfil your requirement. Please check this example:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Typography from '#material-ui/core/Typography';
import { green } from '#material-ui/core/colors';
const useStyles = makeStyles(theme => ({
root: {
padding: theme.spacing(1),
[theme.breakpoints.down('sm')]: {
backgroundColor: theme.palette.secondary.main,
},
[theme.breakpoints.up('md')]: {
backgroundColor: theme.palette.primary.main,
},
[theme.breakpoints.up('lg')]: {
backgroundColor: green[500],
},
},
}));
export default function MediaQuery() {
const classes = useStyles();
return (
<div className={classes.root}>
<Typography variant="subtitle1">{'down(sm): red'}</Typography>
<Typography variant="subtitle1">{'up(md): blue'}</Typography>
<Typography variant="subtitle1">{'up(lg): green'}</Typography>
</div>
);
}
Material UI
You can use following example too.
class Card extends Component {
constructor() {
super();
this.mediaQuery = {
desktop: 1200,
tablet: 768,
phone: 576,
};
this.state = {
windowWidth: null
};
}
componentDidMount() {
window.addEventListener('resize', () => {
this.setState({windowWidth: document.body.clientWidth})
});
}
render() {
return (
<div style={{
width: this.state.windowWidth > this.mediaQuery.phone
? '50%'
: '100%',
//more styling :)
}}>
<!-- <Card> contents -->
</div>
);
}
}
Source
I suggest that use CSS #media query to make responsive layouts.
But if you insist on implement with JS and React you should get windowWidth after component mounted. You can use useEffect hook to do so and save value in a state:
const [windowWidth, setWindowWidth] = useState('');
useEffect(() => {
setWindowWidth(window.innerWidth) // or better one -> window.clientWidth
});
I am working with react components these days and had some issue in styling one of my buttons with a hover style. Following is the code snippet I used in my component.
const darkTheme = createMuiTheme({
palette: {
type: 'dark',
secondary:amber
},
typography: {
useNextVariants: true,
}
});
const lightTheme = createMuiTheme({
palette: {
type: 'light',
secondary:amber
},
typography: {
useNextVariants: true,
}
});
Above is the custom themes I am using.
class APIWidget extends Widget {
constructor(props) {
super(props);
this.styles = {
button: {
backgroundColor: amber[500],
'&:hover': {
backgroundColor: amber[700],
},
position: 'absolute',
bottom: 20,
right: 20
},
};
}
render() {
return (
<MuiThemeProvider theme={this.props.muiTheme.name === 'dark' ? darkTheme : lightTheme}>
<Button variant="contained" color="secondary" style={this.styles.button}>
<ArrowBack style={{marginRight:15}}/>
Back
</Button>
</MuiThemeProvider>
);
}
}
global.dashboard.registerWidget('APIWidget', APIWidget);
I am using material ui and i am importing the colors from it. My button background color works while the hover color doesn't work.
Can you please point out whether there is any mistake in my code or suggest any method to get the necessary hover color.
Thanks in advance.
You can't leverage pseudo-classes such as :hover within inline styles. Instead the styles need to be in a CSS class. Below is an example (based on your APIWidget class) using withStyles to generate the CSS class.
import {
createMuiTheme,
MuiThemeProvider,
withStyles
} from "#material-ui/core/styles";
import Button from "#material-ui/core/Button";
import amber from "#material-ui/core/colors/amber";
import blue from "#material-ui/core/colors/blue";
import React from "react";
import ArrowBack from "#material-ui/icons/ArrowBack";
const darkTheme = createMuiTheme({
palette: {
type: "dark",
primary: amber,
secondary: blue
}
});
const styles = (theme) => ({
button: {
backgroundColor: "red",
"&:hover": {
backgroundColor: "blue"
},
position: "absolute",
bottom: 20,
right: 20
}
});
class APIWidget extends React.Component {
render() {
return (
<MuiThemeProvider theme={darkTheme}>
<Button
variant="contained"
color="secondary"
className={this.props.classes.button}
startIcon={<ArrowBack />}
>
Back
</Button>
</MuiThemeProvider>
);
}
}
export default withStyles(styles)(APIWidget);