This question already has answers here:
How to make MUI Typography without newline?
(6 answers)
Closed 1 year ago.
I would like to apply two different Typography tags to my text, but I don't want a line break in between.
This is what I have:
<Typography variant="title" color="inherit" noWrap>
Project:
</Typography>
<Typography variant="subheading" color="inherit" noWrap>
Example
</Typography>
This is what it looks like (with the line break):
Working example:
https://codesandbox.io/s/jzmz7klzmy
How do I remove the line break?
Wrap those in a display:flex and it will show it in a row.
<div style={{display:"flex"}}>
<Typography variant="title" color="inherit" noWrap>
Project:
</Typography>
<Typography variant="subheading" color="inherit" noWrap>
Example
</Typography>
</div>
codesandbox of edited code.
Edit: You can use style={{marginLeft:10}} on Example to give spacing between the two.
And if you want to align them vertically, give flexDirection:'column' to the style of Project.
Use the display prop on version 4.x
<Typography variant="h1" color="inherit" display="inline">
Project:
</Typography>
<Typography variant="subtitle1" color="inherit" display="inline">
Example
</Typography>
Use the inline prop on version < 4.x
<Typography variant="title" color="inherit" inline>
Project:
</Typography>
<Typography variant="subheading" color="inherit" inline>
Example
</Typography>
https://material-ui.com/api/typography/
Related
I've created a create-react-app project, where I'm using Material UI. Here I've used Box item with display="flex"; inline style. But the flex is not working at all. Here is an image.
When I add add display: flex on the inspect element. It works.
I've uploaded the project to github pages. Funny thing is, it works fine on there. Here is the link of the uploaded page. Why is it not working as intended in the local host server?
<AppBar position="static">
<Toolbar className={classes.toolbar}>
<Typography variant="h5" className={classes.title}>
Travel Advisor
</Typography>
<Box display="flex">
<Typography variant="h6" className={classes.title}>
Explore new places
</Typography>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase placeholder="Search..." classes={{ root: classes.inputRoot, input: classes.inputInput }} />
</div>
</Box>
</Toolbar>
</AppBar>
I'm trying to style and change position of a Link component, I'm trying to have the Link (Forget Password?) at the right end, but now it's centered as shown in the image below
Also I want to change the color of it, I tried color="black" but didn't work
I'm using grids trying to have the texts apart from each other.
The Code
{/* Password */}
<Grid container mt={4}>
<Grid item xs={6} justify={"flex-start"}>
<Typography
variant="h9"
gutterBottom
component="div"
style={{ fontWeight: "bold", textAlign: "left"}}
>
Password
</Typography>
</Grid>
<Grid item xs={6} justify={"flex-end"}>
<Typography
variant="body2"
gutterBottom
component={Link}
// align="right"
to="/register"
>
{/* <Link to="/register">Forget Password?</Link> */}
Forget Password?
</Typography>
</Grid>
</Grid>
If "black" isn't defined in your theme, that won't work. color="primary" should work, but if you can also define black as a color in your theme.
Alternatively, if you want only this link to be black, you can add the attribute sx={{ color: 'black' }} to <Link> and that should work.
If it's not necessary to do so, I wouldn't wrap the link in a typography; just apply all the styles directly to link, as link already uses a typography element under the hood.
Try this to right-align your password link:
<Grid item xs={6}>
<Box display="flex" justifyContent="flex-end">
<Typography
variant="body2"
gutterBottom
component={Link}
// align="right"
to="/register"
>
{/* <Link to="/register">Forget Password?</Link> */}
Forget Password?
</Typography>
</Box>
</Grid>
I have a sentence
Sign In to comment.
I want to create hyperlink for part of my text ("Sign In") and use useNavigate or some other part of react-router-dom to link this to a different route in my frontend. Right now, I have:
const navigate = useNavigate();
return (
<Typography gutterBottom variant="body1" component="div">
<Link
component="button"
variant="body1"
onClick={() => {
navigate('/login')
}}
>
Sign In
</Link>
to comment.
</Typography>
);
using MUI and React, but it looks like this:
You can see
The text isn't completely aligned
There is no space between the "Sign In" and "to comment"
Is there a better way to do this?
<Typography gutterBottom variant="body1" component="div">
<Box sx={{ alignItems: "baseline" }}>
<Link component="button" variant="body1" to="/login">
Sign In
</Link>{" "}
to comment.
</Box>
</Typography>
You dont need to put an on click function in the Link, you can instead use the to="/login" prop
To answer your first question, you can use a flex box and alignItems: 'baseline', this will make your text align to the same baseline.
To answer your second question, you can add a space using jsx {" "}
Hi for some reason this isn't working
let ifAID = "Banco: Global Bank\nTipo de Cuenta: Corriente"
where \n should be a line break this is what is showing off, any advice ?
I'm using Card, CardContent, Typography and Stack all inside a Box that is inside a Container (There's a lot going on)
<Box pl={50} mb={2} sx={{width: "480px", justifyContent: 'center'}}>
<Stack>
<Card >
<CardContent >
<Typography variant = "h5" gutterBottom>
Transferencia Bancaria (ACH)
</Typography>
<Typography variant="h6">
{ifAID}
</Typography>
<Typography>
*Presentar comprobante de pago para retirar libros*
</Typography></CardContent></Card></Stack></Box>
a h6 doesn't handle line break. You may want to use a <pre> tag.
In your case it will become
<Typography variant="h6" component="pre">
{ifAID}
</Typography>
More on pre tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
I am using ReactJS Cards for my program
import Card from 'material-ui/Card/Card';
I want to go to a link, for example www.google.com, when I press on the card. How do I do this?
routeTo(){
window.open('http://www.google.com'); //This will open Google in a new
}
}
<Card className={classes.card} onClick={()=>this.routeTo()}>
<CardActionArea>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary" onClick={() => alert("Share")}>
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
Use
<a href="https://www.google.com/">
instead of Link component for external links.