I'm trying to implement a hover on the Delete button of my list. I want to have it hidden on default, but show it when you hover on a list item. This would be the result:
Before hover:
On hover:
This is my code:
<ListItem className='resourcesInfo-listItem'>
<ListItemAvatar>
<Avatar>
<img alt='borrar recurso' className='resourcesInfo-icon' src={pdf}></img>
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
<ListItemSecondaryAction className='resourcesInfo-deleteButton'>
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
I have tried both searching for the default classes on the Chrome inspector and creating my own classes ('resourcesInfo-listItem' and 'resourcesInfo-deleteButton'), but it doesn't work.
My CSS attempts:
With my own classes:
.resourcesInfo-deleteButton {
display: none;
}
.resourcesInfo-listItem:hover> .resourcesInfo-deleteButton {
display: block!important;
background-color: red!important;
}
With the default classes:
.MuiIconButton-edgeEnd {
display: none;
}
.MuiListItem-root:hover > .MuiIconButton-edgeEnd {
display: block;
}
Related
I'm working with react-pro-sidebar for making a sidebar for my project react web app. Based on mockup, sidebar must hover item like this.
Then, I'm using styled-component for hovering.
const Menuitem = styled(MenuItem)`
:hover {
background-color: #335B8C !important;
color: white !important;
border-radius: 8px !important;
font-weight: bold !important;
}
`;
and also my code goes like this.
<SidebarWrapper>
<SidebarBrand>
<img src={Logo} width="150" />
</SidebarBrand>
<ProSidebarProvider>
<Menu
menuItemStyles={{
button: ({ level, active, disabled }) => {
if (level === 0) {
return {
color: disabled ? "#eee" : "#455A64",
backgroundColor: active ? "#fff" : undefined,
};
}
},
}}
>
<Menuitem
routerLink={
<Link to="/" className="sidebar-link txt-blue-grey-800" />
}
>
<FontAwesomeIcon icon={faHome} />
Dashboard
</Menuitem>
<p
className="text-uppercase txt-blue-grey-700 text-bold base-sm"
style={{ marginRight: 5 }}
>
Layanan Pasien
</p>
<Menuitem
routerLink={
<Link to="/antrian-pasien" className="txt-blue-grey-800" />
}
>
<FontAwesomeIcon icon={faHome} />
Antrian Pasien
</Menuitem>
But it doesn't affect hovering item. It's still default hover by react-sidebar-pro
So, is there any way for overriding default hover for react-sidebar-pro ? Any help will be appreciated. Thank you.
Not an ideal solution but I eventually downgraded to 1.0.0-alpha.7 and used the following code instead...
<Sidebar>
<Menu
renderMenuItemStyles={() => ({
'.menu-anchor': {
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'green',
},
},
})}
>
<MenuItem> Calendar </MenuItem>
</Menu>
</Sidebar>
<Menu
menuItemStyles={{
button: ({ level, active, disabled }) => {
if (level === 0) {
return {
color: disabled ? "#eee" : "#455A64",
backgroundColor: active ? "#fff" : undefined,
"&:hover": {
backgroundColor: "#335B8C !important",
color: "white !important",
borderRadius: "8px !important",
fontWeight: "bold !important"
},
};
}
},
}}
>
I'm simply trying to link to a specific part of my first page when the user clicks on the Shop button in the navigation Drawer but it doesn't do anything at all:
This is the code for the MUI 5 Drawer component:
<Drawer
anchor="left"
open={open}
onClose={() => setOpen(false)}
PaperProps={{
sx: {
background: "linear-gradient(to top, #9C685B44, #9C685Bff)",
},
}}
>
<IconButton onClick={() => setOpen(false)}>
<ChevronLeftIcon sx={{ color: "white" }} />
</IconButton>
<Divider />
<List>
/////////////////////////////////
<ListItem>
<Button
// Linking to Products Section
href="#products"
startIcon={<PhoneAndroidIcon />}
sx={{
color: "white",
fontFamily: "Montserrat",
}}
>
Shop
</Button>
</ListItem>
//////////////////////////////
<ListItem>
<Badge color="error" badgeContent={badgeNumber}>
<Button
startIcon={<ShoppingCartIcon />}
sx={{
color: "white",
fontFamily: "Montserrat",
}}
>
Cart
</Button>
</Badge>
</ListItem>
</List>
</Drawer>
And in that respective section, I have added an id with the value of products to the container:
<Container maxWidth="xl" id="products">
...
</Container>
Even using the anchor tag results in the same issue.
Is there anyway to fix this?
You can use scrollIntoView and History.pushState() to handle this. Remove the href from your Button component, and instead use its onClick method to call the following:
// id is your section names (e.g. 'products')
// url is optional, and if not specified, is set to the document's current URL
const onNavClick = (event, id, url) =>
{
let element = document.getElementById(id)
event.preventDefault()
element.scrollIntoView()
window.history.pushState(id, id, url)
}
There are various other options you can pass into scrollIntoView, and you can find out more about the available options by following the link above.
So I'm a newbie when it comes to React and thought to get familiar with the concepts utilizing mui. I'm creating a nav bar and one of the features is to have a search bar that is initially collapsed and expand once the search icon is pressed. This will also hide the typography element. My issue seems that no matter if I set flexgrow for both collapse or the text input that's being encapsulated the element doesn't seem to grow despite the extra space. I also observed when I set the width of the element using vw it adjusts but the right icons and search bar begin to overlap after minimizing it to a certain point. I wonder if this is a styling issue or whether if transition is incapable of doing this, if it's a styling issue how do I get the text input to expand the needed space?
Navbar.js
import React, { useState } from "react";
import {
AppBar,
Drawer,
Box,
IconButton,
List,
ListItemButton,
ListItemText,
Toolbar,
TextField,
Typography,
Collapse,
} from "#mui/material";
import MenuIcon from "#mui/icons-material/Menu";
import PersonOutlineOutlinedIcon from "#mui/icons-material/PersonOutlineOutlined";
import SearchOutlinedIcon from "#mui/icons-material/SearchOutlined";
import ShoppingBagOutlinedIcon from "#mui/icons-material/ShoppingBagOutlined";
import { createTheme } from "#mui/material";
const Navbar = () => {
const [drawer, setDrawer] = useState(false);
const [drawer2, setDrawer2] = useState(false);
const [clicked, setClicked] = useState(false);
const theme = createTheme({
typography: {
fontFamily: ["Abril Fatface", "cursive"].join(","),
},
});
return (
<AppBar position="fixed" sx={{ height: 70 }} className="navbar">
<Toolbar>
<IconButton onClick={() => setDrawer(!drawer)} className="id">
<MenuIcon fontSize="large"></MenuIcon>
</IconButton>
<Drawer open={drawer} onClose={() => setDrawer(!drawer)}>
<Box sx={{ width: 400, backgroundColor: "red" }}>
<List>
<ListItemButton>
<ListItemText primary="HI" />
</ListItemButton>
</List>
</Box>
</Drawer>
<Collapse orientation="horizontal" in={clicked} timeout={100} unmountOnExit>
<TextField sx={{ flexGrow: 2 }} />
</Collapse>
<Typography
component="a"
variant="h4"
theme={theme}
className="item"
sx={{
color: "black",
flexGrow: 2,
textAlign: "center",
display: clicked ? "none" : "block",
}}
>
APPSTUFF
</Typography>
<IconButton className="id">
<PersonOutlineOutlinedIcon fontSize="large"></PersonOutlineOutlinedIcon>
</IconButton>
<IconButton className="id" onClick={() => setClicked(!clicked)}>
<SearchOutlinedIcon fontSize="large"></SearchOutlinedIcon>
</IconButton>
<IconButton className="id" onClick={() => setDrawer2(!drawer2)}>
<ShoppingBagOutlinedIcon fontSize="large"></ShoppingBagOutlinedIcon>
</IconButton>
<Drawer
open={drawer2}
onClose={() => setDrawer2(!drawer2)}
anchor="right"
>
<Box sx={{ width: 400, backgroundColor: "red" }}>
<List>
<ListItemButton>
<ListItemText primary="HI" />
</ListItemButton>
</List>
</Box>
</Drawer>
</Toolbar>
</AppBar>
);
};
export default Navbar;
NavbarStyle.css
.id {
color: black;
margin-top: 0.5%;
display: flex;
flex-grow: 0;
}
.navbar {
width: 100vw;
box-shadow: none;
background-color: white;
}
I'm trying to use React Material-UI and the Drawer API to build a navigation sidebar with the buttons rotated (a stacked list with the buttons turned 90 degrees). I only have a few buttons I'd like to use so I'm trying to do this with the permanent Drawer setup. I was wondering if anyone had any examples or solutions to this. Presently I have this in a CSS file:
.horiz-list {
display: inline-block;
transform: rotate(270deg);
height: 80px;
width: 50px;
}
and this as an example in my sidebar code:
const button = {
text: "Photos",
onClick: () => history.push('/photos')
};
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
>
<Toolbar />
<div className={classes.drawerContainer}>
<Divider />
<List>
<ListItem button key={button.text} onClick={button.onClick}>
<ListItemText primary={button.text} className="horiz-list" />
</ListItem>
</List>
<Divider />
</div>
</Drawer>
Right now, some of the labels end up off screen and with the slider at the bottom. Thanks in advance!
I want to modify the default style of a Menu Item (which has a Search Bar inside it), I want to remove the border-bottom property which is appeared by hovering over the item (search bar)
<Menu theme='light' className='nav-bar' mode='horizontal'>
<Menu.Item disabled style={{ color: '#262626', fontSize: '1.5rem' }}>
{/* <Title style={{color: '#40a9ff'}} level={4}>Dokan</Title> */}
Dokan
</Menu.Item>
<Menu.Item className="modified-item">
<Search
placeholder='input search text'
onSearch={(value) => console.log(value)}
/>
</Menu.Item>
<Menu.Item className>Change Theme</Menu.Item>
<Menu.Item className>Home</Menu.Item>
<Menu.Item className>Checkout</Menu.Item>
</Menu>
what I have tried is:
.modified-item:hover {
border-bottom: none;
}
but it didn't work.
.ant-menu-horizontal > .ant-menu-item::after,
.ant-menu-horizontal > .ant-menu-submenu::after {
border-bottom: none !important;
transition: none !important;
}
border-bottom: none; is not a style option that exists in css.
try
border-bottom-style: none;
or
opacity: 0;
Instead of using className in Menu.Item use style property
<Menu.Item style={{borderBottom:'none'}}>
<Search
placeholder='input search text'
onSearch={(value) => console.log(value)}
/>
</Menu.Item>
.ant-menu-item:hover::after {
border-bottom: none !important;
}
This will work
Add Style to Your Menu Tag as below
<Menu
onClick={this.handleClick}
selectedKeys={[current]}
mode="horizontal"
className="pb-3 pl-3 pt-3"
style={{borderBottom: "none", lineHeight:"0px"}}
>