I'm struggling to effect an on-hover dotted underline on a Material-UI <Link> component. The following code doesn't seem to have any effect:
const useStyles = makeStyles(theme => ({
link: {
'&hover': {
textDecoration: 'dotted'
},
},
}));
export default function Links() {
const classes = useStyles();
return (
<Typography>
<Link
underline={'hover'}
href="/"
className={classes.link}
>
Some anchor text
</Link>
</Typography>
);
}
Any alternative?
This works for me..
There were two things I had to change:
You have to change &hover to &:hover
You have to use textDecorationStyle: 'dotted', instead of textDecoration: 'dotted'
Live Demo
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import { Typography, Link } from '#material-ui/core';
const useStyles = makeStyles(theme => ({
link: {
'&:hover': {
textDecorationStyle: 'dotted'
}
},
}));
export default function Links() {
const classes = useStyles();
return (
<Typography>
<Link
underline="hover"
href="/"
className={classes.link}
>
Some anchor text
</Link>
</Typography>
);
}
Related
I wanted to know if there is some way we can use ::selection in Material-UI.
Code :-
import React from 'react';
import { makeStyles } from '#material-ui/core';
import List from '#material-ui/core/List';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import InboxIcon from '#material-ui/icons/Inbox';
const styles = makeStyles((theme) => ({
root: {
'&:hover': {
backgroundColor: theme.palette.primary.contrastText,
},
'&:selection': {
backgroundColor: 'tomato',
},
},
}));
const Items: React.FC = () => {
const classes = styles();
return (
<List component='nav' aria-label='management side bar'>
<div className={classes.root}>
<ListItem button>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary='Inbox' />
</ListItem>
</div>
</List>
);
};
export default Items;
I just want to change the color of the background on selecting the List Component, can I do that using the simple '::selection' selector in material-ui?
In your example you are using the hover pseudo-class and the selection pseudo-element
All pseudo-classes are used via : and pseudo-elements via ::
Therefore, your styled code should look like this:
const styles = makeStyles((theme) => ({
root: {
'&:hover': {
backgroundColor: theme.palette.primary.contrastText,
},
'&::selection': {
backgroundColor: 'tomato',
},
},
}));
How do I get the Backdrop to cover the button?
No matter what I do, the buttons appear as if they were above the backdrop, I can't them move them behind it.
See code:
import React from "react";
import { Backdrop, Button } from "#material-ui/core";
import CircularProgress from "#material-ui/core/CircularProgress";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({});
export default function App() {
const classes = useStyles();
const [test, setTest] = React.useState(true);
return (
<div className={classes.parent}>
<Backdrop className={classes.backdrop} open={test}>
<CircularProgress color="inherit" />
</Backdrop>
<Button
variant="contained"
color="secondary"
onClick={() => {
setTest(test ? false : true);
}}
>
I should be behind the backdrop (click me)
</Button>
</div>
);
}
You need to give the backdrop a higher z-index
const useStyles = makeStyles((theme) => ({ backdrop: { zIndex: theme.zIndex.drawer + 1, color: '#fff', }, }));
This should fix it, just check the docs.
I have theme like this:
export const Original = createMuiTheme({
palette: {
type: 'light',
primary: {
light: '#b2dfdb',
main: '#26a69a',
dark: '#004d40',
}
}
});
And I use it for this:
<ListItem color = 'primary' button >
<img src={APP} alt='' />
</ListItem>
how can I use the primary-light or primary-dark for ListItem
If you read Material UI documentation. You would know that List & ListItem don't have props color. Thus in order for you to add one or apply any other colors as you wish, you can do something like this:-
App.js (require: ThemeProvider & createMuiTheme from #material-ui/core/styles)
import React from "react";
import { ThemeProvider, createMuiTheme } from "#material-ui/core/styles";
import "./style.css";
import Demo from "./Demo";
export default function App() {
const lightTheme = createMuiTheme({
palette: {
type: "light",
primary: {
light: "#b2dfdb",
main: "#26a69a",
dark: "#004d40"
}
}
});
return (
<ThemeProvider theme={lightTheme}>
<Demo />
</ThemeProvider>
);
}
Demo.js (require: makeStyles or 'useTheme' from #material-ui/stlyes):-
import React from "react";
import { makeStyles, useTheme } from "#material-ui/styles";
import { List, ListItem } from "#material-ui/core";
import "./style.css";
const Demo = () => {
const classes = useStyles();
const theme = useTheme();
return (
<>
<List>
<ListItem className={classes.listItem}>
Using useStyles (classes)
</ListItem>
<ListItem style={{ color: theme.palette.primary.dark }}>
Using inline direct theme
</ListItem>
</List>
<List className={classes.list}>
<ListItem>Having List control over all ListItem styles</ListItem>
</List>
</>
);
};
export default Demo;
const useStyles = makeStyles(theme => ({
listItem: {
color: theme.palette.primary.light
},
list: {
color: theme.palette.primary.main
}
}));
Here are the working sandbox code you can refer to.
I am using react material ui. In my header i have used links as well as tabs both. Please tell me how to do linking using material links as we can't use to. Can it be done by on click method and navigate to that page as well as what changes i need to do in my app.tsx file. please help me. I am beginner. Home I had made a component name home but how can i call on click of link?
import React, { Component } from 'react';
import { makeStyles, createStyles, Theme } from '#material-ui/core/styles';
import Link from '#material-ui/core/Link';
import Typography from '#material-ui/core/Typography';
import Home from '../pages/Home';
import Home2 from '../pages/Home2';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
'& > * + *': {
marginLeft: theme.spacing(3),
color:"#F08713",
paddingRight: "revert",
borderRight: "1px solid #ddd"
},
},
}),
);
function Links() {
const classes = useStyles();
const preventDefault = (event: React.SyntheticEvent) => event.preventDefault();
return (
<Typography className={classes.root}>
<Link
underline ="hover"
component="button"
href="Home">
Home
</Link>
<Link
underline ="hover"
component="button"
href="#/home2">
For home2
</Link>
</Typography>
);
}
export default Links
I have tried to override the in typography with
root: {
'&a':{
color: '#FF6600'
},
},
but didn't work any suggestions ?
There are multiple ways to change the color(style) of Material-UI <Typography /> locally.
Mostly been used options would be considered as:
Add style based on the provided CSS API - refer to MUI Typography API document
Override style using the nesting selector for elements and classes - you can find the details inside the browser dev tools
import React from "react";
import "./styles.css";
import { makeStyles } from "#material-ui/core/styles";
import { Typography } from "#material-ui/core";
const useStyles = makeStyles(theme => ({
option1: {
color: "red"
},
option2: {
"&.MuiTypography-root": {
color: "blue"
}
}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<Typography
variant="h5"
component="h5"
classes={{ root: classes.option1 }}
>
Use CSS API with attribute: root
</Typography>
<Typography variant="h5" component="h5" className={classes.option2}>
Use nesting selector of className: MuiTypography-root
</Typography>
</div>
);
}