I am a new material UI, I am trying to use Typography, if I don't use variant in the typography tag, it is fine
<div className="login-details">
<Typography>{details ? details.email : "N/A"} |</Typography>
<Button type="link" onClick={()=> document.dispatchEvent(new CustomEvent("user.start_logout"))}>
logout
</Button>
</div>
if I use a variant like below, the UI is falling apart
<div className="login-details">
<Typography variant="h2">{details ? details.email : "N/A"} |</Typography>
<Button type="link" onClick={() => document.dispatchEvent(new CustomEvent("user.start_logout"))}>
logout
</Button>
</div>
Please help me.
Thanks in Advance.
Not using a variant is equivalent to variant="body1". Check your h2 style, particularly the line height and margins. Refer to the documentation on how to customise the default typography.
Related
Everything is in the title. Here is the CodeSandbox with reproduction !
When using MUI's ButtonGroup, the layout is fine with three "regular" buttons:
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
Result:
But as soon as we add an href to one of the buttons, it breaks the layout, like so:
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button href="test.com">One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
Result:
Is there any way to fix this ? I don't want to have to use the trick of onClick and location.replace or location.href...
Also, maybe I should post this as an issue on MUI's GitHub? I'm guessing only if it is relevant and not fixable, but there are so many I doubt they would see it.
Use the prop LinkComponent="button":
import * as React from "react";
import Button from "#mui/material/Button";
import ButtonGroup from "#mui/material/ButtonGroup";
export default function BasicButtonGroup() {
return (
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button LinkComponent="button" href="test.com">
One
</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
);
}
Demo: https://codesandbox.io/s/basicbuttongroup-material-demo-forked-43pmhn?file=/demo.js:0-430
I want to create a button component like this:
function Button ({ color }) {
return (
<button className={`hover:bg-${color}-300 bg-${color}-100>
</button>
That way I can make all of my button colors (with hover variant) consistent by just doing:
<Button color="green" >
</Button>
The problem is that purge doesn't see that I want a green button so no styling occurs when I use purge.
Is there a better way to create my button component that will comply with CSS purge?
css get the the classes as them write in components but for this issue you need to use
safelist: [{ pattern: /bg-(red|green|blue|sky)-(500)/, }, ],
in tailwind.config to make them extract all time.
I ended up doing this:
<button type={type} title={title} disabled={disabled} className={`
active:drop-shadow-3xl
select-none
font-mono
font-bold
m-1.5
p-1.5
active:translate-y-[2px]
border-2
border-gray-400
rounded-md
${className}`}
onClick={click}>
{children}
</button>
and then add whatever inside of ${className}. its not a great answer but it is how I did it
Hey guys I'm a newbie trying to make a material UI temporary drawer and by default the value of the onClick event is a string and I have no idea how to convert it into an icon.
return (
<div>
{['Home'].map((anchor) => (
<React.Fragment key={anchor}>
<Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
<SwipeableDrawer
anchor={anchor}
open={state[anchor]}
onClose={toggleDrawer(anchor, false)}
onOpen={toggleDrawer(anchor, true)}
>
{list(anchor)}
</SwipeableDrawer>
</React.Fragment>
))}
</div>
);
As you can see: "HOME" is a string and what shows up on the site UI is just the "HOME" word that is a button. How do I format the code so the "HOME" button would not display a string but an icon instead. I'd be using MenuIcon from Material UI Icons to take its place. Thanks!!
You can use Icon component and pass the string to the children props. Before that, remember to add the material icon font to your html file
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
import IconButton from "#material-ui/core/IconButton";
import Icon from "#material-ui/core/Icon";
...
{["home", "star", "add_circle"].map((name) => (
<IconButton>
<Icon>{name}</Icon>
</IconButton>
))}
Live Demo
I have an issue with my icons displaying:
Here is my code:
import SearchIcon from '#material-ui/icons/Search';
<Button variant='contained' className={classes.sendButton}>
Search
<img src={SearchIcon} alt='search'/>
</Button>
However, in the UI it gets rendered with the default 'broken-page' symbol. There is no error in console.
I have npm installed the latest #material-ui/icons=^4.9.1
I am unable to ascertain what is causing this issue.
Thanks
Ciao, to show Material UI icon is not necessary to use img tag. Just write:
import SearchIcon from '#material-ui/icons/Search';
<Button variant='contained' className={classes.sendButton}>
Search
<SearchIcon />
</Button>
And you should see your icon in button.
Anyway, I suggest you to use startIcon Button prop like:
<Button
variant='contained'
className={classes.sendButton}
startIcon={<SearchIcon />}
>
Search
</Button>
Current Behavior 😯
When having a Button with a "contained" variant in a Transition (Slide, Grow or Fade) the Button's variant is no longer recognized.
Expected Behavior 🤔
The Button should have a background color.
Steps to Reproduce 🕹
`import { ButtonGroup, Button, Slide } from '#material-ui/core';`
<ButtonGroup variant="text" color="primary" aria-label="menu" id="buttongroup">
{sections.map(x => <Button onClick={() => window.location.href = `#${x.name.toLowerCase()}`} key={x.name}>{x.name}</Button>)}
<Button onClick={() => window.open('tel:00918779839201')}>(+91) 8779839201</Button>
<Slide
direction="left"
in={useScrollTrigger({threshold: document.documentElement.clientHeight/1.5})}
mountOnEnter
unmountOnExit
>
<Button variant="contained">Schedule Site Visit</Button>
</Slide>
</ButtonGroup>
You can see an example here.
Just scroll down and you'll see the Button sliding in on the top right of the Appbar.
ButtonGroup assumes that its direct children are Button elements. Unless the child has the variant prop specified, ButtonGroup will give the child its own variant. In your case, you have a child that is a Slide element and that Slide element does not have a variant specified, so ButtonGroup gives it one (text in your case). Slide passes this property on to the element it wraps and thus overrides the variant of your contained Button.
You can overcome this by specifying the variant on the Slide element:
import React from "react";
import Button from "#material-ui/core/Button";
import ButtonGroup from "#material-ui/core/ButtonGroup";
import Slide from "#material-ui/core/Slide";
export default function App() {
const [slideIn, setSlideIn] = React.useState(false);
return (
<ButtonGroup variant="text">
<Button onClick={e => setSlideIn(true)}>Slide In</Button>
<Button onClick={e => setSlideIn(false)}>Slide Out</Button>
<Slide
variant="contained"
direction="left"
in={slideIn}
mountOnEnter
unmountOnExit
>
<Button variant="contained">Schedule Site Visit</Button>
</Slide>
</ButtonGroup>
);
}