I'm using React with material-ui and have a menu component with a list, the last item in this menu is different from the others, I using :last-child and it is functional, the problem is when I try using :hover in that last element.
Style:
const useStyles = makeStyles((theme) => ({
menu: {
textDecoration: 'none',
color: theme.palette.navy.default,
cursor: 'pointer',
fontWeight: 'bold',
textTransform: 'uppercase',
'&:last-child': {
background: theme.palette.orange.default,
borderRadius: '5em',
color: theme.palette.white.default,
// using hover in the last child item not work
'&:hover': {
background: theme.palette.green.default,
},
},
},
}));
Component:
...
const classes = useStyles();
<MenuList>
{menu.map((item, index) => (
<MenuItem selected={false} key={index} className={classes.menu}>
{item.title}
</MenuItem>
))}
</MenuList>
Do you know how to solve it?
It can be done like,
menu: {
textDecoration: 'none',
color: theme.palette.navy.default,
cursor: 'pointer',
fontWeight: 'bold',
textTransform: 'uppercase',
'&:last-child': {
background: theme.palette.orange.default,
borderRadius: '5em',
color: theme.palette.white.default,
},
// using hover outside with the last child
'&:last-child:hover': {
background: theme.palette.green.default,
},
},
}));
I created a new component where I retested the options than did not work. I included #Sanish Joseph's answer that did not work previously and, this time with this new component, it worked.
In context, I created a menu mapping objects array and each object has another objects array with the submenus. I was discarding elements until I found the problem. In the Popper component that I use to display the submenus, there is a property called "disablePortal". This property was causing that "hover" in the "last-child" to not work.
Related
I'm using Griffel https://griffel.js.org/ for the first time and I am struggling to achieve this simple thing. By default this button is hidden and when the user hover's over the parent I want to make the child visible.
I am using React so I have this button component inside the parent div.
const styles = useStyles();
<div className={styles.userContainer}>
<Button className={styles.removeUserButton} />
</div>
CSS:
export const useStyles = makeStyles({
removeUserButton: {
display: 'none'
},
userContainer: {
backgroundColor: '#fefefe',
'&:hover': {
'& removeUserButton': {
display: 'inline-block'
}
}
}
})
I was not sure if it will know what the removeUserButton class is so I also tried by making it variable. So I added:
const removeUserClassName = 'removeUserButton';
on top of the file and then in CSS:
[removeUserClassName]: {
display: 'none'
},
userContainer: {
backgroundColor: '#fefefe',
'&:hover': {
[`& ${removeUserClassName}`]: {
display: 'inline-block'
}
}
}
But this still does not work.
And in case you are wondering I have also tried the first piece of code by adding . before removeUserButton.
Has anyone used Griffel and knows how to handle this?
Appreciate any guidance. Thank you!
Here is a sandbox I created:
https://codesandbox.io/s/griffel-hover-issue-gwx1sj
The issue is that you are attempting to use a classname that is in your configuration (removeUserClassName). Yet, Griffel uses dynamic class names. So you'll need to use a different selector.
You can see the nature of the dynamic class names in this playground example.
Here is a working StackBlitz that uses the button as selector rather than class name and it works fine.
Here is the code for reference:
import { makeStyles } from '#griffel/react';
export const useStyles = makeStyles({
removeUserButton: {
display: 'none',
},
userContainer: {
width: '150px',
height: '50px',
backgroundColor: 'black',
':hover': {
'& button': { display: 'inline-block' },
backgroundColor: 'blue',
},
},
});
Within a datacell, I wasn't able to find out how to stack text. So I created a textfield, gave it value and gave it helper text and disabled the textfield and changed the text color to black when disabled. I've been trying to figure out how to change the bottomBorder to 'none' (which is what I assume is what is being used to create the dashed line under the input value text).
This is what I have so far.
const DarkerDisabledTextField = withStyles({
root: {
marginRight: 8,
"& .MuiInputBase-root.Mui-disabled": {
color: 'black',
fontSize: '16px',
borderBottom: 'none',
}
},
underline: {
"& .MuiInputBase-root.MuiInput-outlined": {
borderBottom: 'none',
}
}
})(TextField);
This is what I used to create and style my textfield. The underline key isn't working how I have read that it should.
And this is what I have tried so far with my textfield
<DarkerDisabledTextField
title={params.data.name}
disabled
defaultValue={params.data.name}
helperText={title}
fullWidth
/>
I suggest prop solution.
<DarkerDisabledTextField
helperText="helper text"
disabled={isDisabled}
InputProps={isDisabled ? { disableUnderline: true } : {}}
/>
If you prefer withStyles way, check :before
const DarkerDisabledTextField = withStyles({
root: {
marginRight: 8,
"& .MuiInputBase-root.Mui-disabled:before": {
color: "black",
fontSize: "16px",
borderBottom: "none"
}
}
})(TextField);
Applied codesandbox
if someone uses the Mui v5 inputs with createTheme, here's what i added to components:
createTheme({
components: {
MuiInputBase: {
styleOverrides: {
root: {
'&.MuiInput-root.Mui-disabled': {
':before': {
borderBottomStyle: 'solid'
}
}
}
}
}
}
});
I'm trying to adjust the first option to be centered in the option in the React Select but nothing it is working for that ( all other adjustments in the CSS of React Select it is working). here the code that I'm using in the option values:
const option = (provided, state) => ({
...provided,
background: state.isSelected ? theme.colors.green600 : theme.colors.white,
color: state.isSelected ? theme.colors.white : theme.colors.grey500,
display: 'flex',
fontFamily: 'CircularStd',
lineHeight: '18px',
fontSize: '14px',
':nth-child(0) ': {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
textTransform: 'uppercase',
},
});
obs: the option it is inside of customStyles, and I'm passing into the Select, like styles={customStyles}
In order to style the first option you may want to target the :first-child of the MenuList. Here is the example
const styles = {
menuList: (provided, state) => {
return {
...provided,
"& :first-child": {
textAlign: "center"
}
};
}
};
Live Example
I would like to add a custom style for Material UI tooltip arrow but I can not set the border color and the background color.
This is the configuration I have - react:
const useStylesBootstrap = makeStyles(theme => ({
arrow: {
// color: '#E6E8ED',
border: '1px solid #E6E8ED',
},
tooltip: {
backgroundColor: theme.palette.common.white,
border: '1px solid #E6E8ED',
color: '#4A4A4A'
},
}));
This is what I want to achieve:
I want to apply a gray color in the triangle border and the background will be white.
On the arrow configuration, the border config will not work, it will apply a border color in the square that's housing the triangle. Without material UI, the issue could be solved using the pseudo :before and :after to achieve the desired output. I would like to know if there is a solution to this using material UI custom configuration. Not too familiar with Material UI, your help will be appreciated
You are right, You need to override &:before pseudoselector like this.
Here is the code sandbox project link
import React from "react";
import Button from "#material-ui/core/Button";
import Tooltip from "#material-ui/core/Tooltip";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(theme => ({
arrow: {
"&:before": {
border: "1px solid #E6E8ED"
},
color: theme.palette.common.white
},
tooltip: {
backgroundColor: theme.palette.common.white,
border: "1px solid #E6E8ED",
color: "#4A4A4A"
}
}));
export default function ArrowTooltips() {
let classes = useStyles();
return (
<Tooltip
title="Add"
arrow
classes={{ arrow: classes.arrow, tooltip: classes.tooltip }}
>
<Button>Arrow</Button>
</Tooltip>
);
}
See tooltip css. Use arrow and &::before to target the arrow and apply your styles. (note the double :: there)
makeStyles - style
arrow: {
fontSize: 20,
color: "#4A4A4A",
"&::before": {
backgroundColor: "blue",
border: "2px solid red"
}
}
JSX
<Tooltip classes={{ arrow: classes.arrow }} title="Delete" arrow>
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</Tooltip>
Working demo
FYI on material ui 5 makestyles is deprecated.
Because tooltip is in portal you cannot style it directly
const StyledTooltip = styled<typeof Tooltip>(({ className, ...props }) => (
<Tooltip {...props} classes={{ popper: className }} />
))``;
then in reder function you can use sx, by setting popper you can access child props via sx
<StyledTooltip
open
arrow
sx={{
'& .MuiTooltip-arrow': {
background: 'red',
},
}}
/>
Using the official MUI customization examples:
https://mui.com/material-ui/react-tooltip/#customization
const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
<Tooltip {...props} classes={{ popper: className }} />
))(({ theme }) => ({
[`& .${tooltipClasses.arrow}`]: {
color: theme.palette.common.white,
"&::before": {
backgroundColor: theme.palette.common.white,
border: "1px solid #999"
}
},
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
},
}));
We can do a custom styling in the following way
import Tooltip from '#material-ui/core/Tooltip'
import { withStyles } from '#material-ui/core/styles'
const HtmlTooltip = withStyles(theme => ({
arrow: {
'&::before': {
color: 'white'
}
},
tooltip: {
backgroundColor: '#f5f5f9',
boxShadow: theme.shadows[8],
color: 'rgba(0, 0, 0, 0.87)',
fontSize: 14,
maxWidth: 800,
padding: 0,
},
tooltipPlacementTop: {
margin: '4px 0',
},
}))(Tooltip)
<HtmlTooltip
title={
<React.Fragment>
<Typography color="inherit">Tooltip with HTML</Typography>
<em>{"And here's"}</em> <b>{'some'}</b> <u>{'amazing content'}</u>.{' '}
{"It's very engaging. Right?"}
</React.Fragment>
}
>
<Button>HTML</Button>
</HtmlTooltip>
I'm using React Material Autocomplete fields in my project that has a nested TextField. I've currently applied standard styles to it (when no value is present and just the label is showing in the field), and also different styles on hover. However, I want the same hover styles to be applied to the whole Autocomplete box (not just the TextField element) if the TextField has a value in it, but I'm unable to figure out how to do this. My Autocomplete code and current CSS styles are below. Please could anybody help and let me know how I can do this?
Autocomplete Code
const renderComponentList = (componentList, isDisabled, name, label) => (
componentList &&
<Autocomplete
classes={{
root: classes.root,
}}
options={componentList}
disabled={isDisabled}
name={name}
getOptionLabel={(option) => option.name}
onChange={
(event, value, reason) => {
this.handleAutocompleteChange(name, value);
}
}
style={{width: '100%'}}
renderInput={
(params) =>
<TextField
{...params}
name={name}
label={label}
variant="outlined"
/>
}
/>
);
CSS Styles
export const styles = theme => ({
// Autocomplete option styles
root: {
color: '#FFFFFF',
backgroundColor: '#303039',
opacity: 0.6,
"&:hover": {
backgroundColor: '#1E1E24',
borderRadius: '5px',
opacity: 1,
},
"&:focus-within": {
backgroundColor: '#1E1E24',
borderRadius: '5px',
opacity: 1,
},
// Something like this to style the autocomplete when input has a value, but this only
// targets the input field (TextField) rather than the whole Autocomplete field
// "& input[value]:not([value=''])": {
// backgroundColor: '#1E1E24',
// borderRadius: '5px',
// opacity: 1,
// },
"& .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
},
"&:hover .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
borderRadius: '5px 5px 0 0',
},
"& .MuiInputLabel-outlined": {
color: '#FFFFFF',
},
"& .Mui-disabled": {
opacity: 0.6,
},
"& .Mui-disabled .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
},
},
});
I've managed to resolve the issue. I had to create a new class for the desired style when a value was present and conditionally render it in the Autcomplete element, based on the relevant state.
To conditionally render the class, I had to pass in stateVal as one of the props in my function and then change the root line in the Autocomplete classes property to root: stateVal ? classes.rootHasVal : classes.rootHasNoVal, instead.