I want to use Menu from Material UI and I need to move it up once it's open. To do it precisely I want to use transformOrigin ={{vertical: }} . My question is how shall I write it properly? I tried different ways of coding it, but it still shows me an error.
Below You can see how it looks when I use built value for : vertical:'bottom'. It's not covering it fully as I want, thus probably I need to move it manually.
This is how code looks now:
const StyledMenu = withStyles({
paper: {
border: "1px solid #FFFFFF",
boxShadow:
"0px 16px 24px rgba(0, 0, 0, 0.14), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.2)",
borderRadius: "0px",
fontSize: "1.3rem",
},
list: {
fontSize: "1.3rem",
},
})((props: MenuProps) => (
<Menu
elevation={0}
getContentAnchorEl={null}
anchorOrigin={{
vertical: "bottom",
horizontal: "center",
}}
transformOrigin={{
vertical: "bottom",
horizontal: "center",
}}
{...props}
style={{ fontSize: "1.3rem" }}
/>
));
You can change the number based on your menu position.
transformOrigin={{
vertical: -10,
horizontal: 140,
}}
Related
I want this button to show boxShadow only at Hover. How to do that ?
Button code:
<CButton
style={{
float: 'right',
marginBottom: '15px',
marginRight: '30px',
backgroundColor: '#06ac06',
border: 'none',
boxShadow: '0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)',
}}
</CButton>
Pseudo-classes like :hover are not available as inline style. You can implement the hover behavior in JS through a React state + onMouseEnter and onMouseLeave listeners (and then set the box-shadow value based on the state). But as you can see, this approach requires too much boilerplate. I would suggest using CSS-in-JS library like styled-components, utility class like Tailwind, or SCSS.
Try this code: https://codesandbox.io/s/kind-morning-s5sh64?file=/src/App.js
const [isHover, setIsHover] = useState(false)
//...
<CButton
onMouseEnter={() => setIsHover(true)}
onMouseLeave={() => setIsHover(false)}
style={{
float: 'right',
marginBottom: '15px',
marginRight: '30px',
backgroundColor: '#06ac06',
border: 'none',
transition: 'box-shadow .3s', //added for Smouth transition
boxShadow: `5px 5px 18px -3px rgba(0,0,0,${isHover ? 0.27 : 0})`,
}}
>
</CButton>
```
My custom makeStyles for MaterialUI Button component is getting overridden by .css-zln006-MuiButtonBase-root-MuiButton-root.
I have a Material UI Button component:
import { Button } from "#mui/material";
import useStyles from "./HeaderStyles.js";
const Header = () => {
const classes = useStyles();
return (
<React.Fragment>
<AppBar position="fixed">
<Toolbar disableGutters>
<Button
className={classes.button}
variant="contained"
color="secondary"
>
Click me
</Button>
</Toolbar>
</AppBar>
</React.Fragment>
);
};
export default Header;
My HeaderStyles.js file:
import { makeStyles } from "#mui/styles";
const useStyles = makeStyles((theme) => ({
button: {
fontFamily: "Pacifico",
textTransform: "none",
fontSize: "1rem",
borderRadius: "50px",
marginLeft: "50px",
marginRight: "25px",
height: "45px",
},
}));
export default useStyles;
My styles are getting overridden by the .css-zln006-MuiButtonBase-root-MuiButton-root class.
This class is replacing my button style.
.css-zln006-MuiButtonBase-root-MuiButton-root {
display: '-webkit-inline-box',
display: '-webkit-inline-flex',
display: '-ms-inline-flexbox',
display: 'inline-flex',
WebkitAlignItems: 'center',
WebkitBoxAlign: 'center',
MsFlexAlign: 'center',
alignItems: 'center',
WebkitBoxPack: 'center',
MsFlexPack: 'center',
WebkitJustifyContent: 'center',
justifyContent: 'center',
position: 'relative',
boxSizing: 'border-box',
WebkitTapHighlightColor: 'transparent',
backgroundColor: 'transparent',
outline: '0',
border: '0',
margin: '0',
borderRadius: '0',
padding: '0',
cursor: 'pointer',
WebkitUserSelect: 'none',
MozUserSelect: 'none',
MsUserSelect: 'none',
userSelect: 'none',
verticalAlign: 'middle',
MozAppearance: 'none',
WebkitAppearance: 'none',
WebkitTextDecoration: 'none',
textDecoration: 'none',
color: 'inherit',
fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
fontWeight: '500',
fontSize: '0.875rem',
lineHeight: '1.75',
letterSpacing: '0.02857em',
textTransform: 'uppercase',
minWidth: '64px',
padding: '6px 16px',
borderRadius: '4px',
WebkitTransition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
color: 'rgba(0, 0, 0, 0.87)',
backgroundColor: '#FFBA60',
boxShadow: '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)'
}
My button style
.makeStyles-button-59 {{
height: '45px',
fontSize: '1rem',
fontFamily: 'Pacifico',
marginLeft: '50px',
marginRight: '25px',
borderRadius: '50px',
textTransform: 'none'
}
How to solve this?
#mui/styles is the legacy styling solution for MUI. It is deprecated
in v5. It depends on JSS as a styling solution, which is not used in
the #mui/material anymore. If you don't want to have both emotion &
JSS in your bundle, please refer to the #mui/system documentation
which is the recommended alternative.
Use sx prop instead
const buttonStyles = {
borderRadius: 50,
fontFamily: "Pacifico",
fontSize: "1rem",
textTransform: "none",
};
<Button sx={buttonStyles} variant="contained" color="secondary">
Click me
</Button>
I am trying to make React modal have a smooth transition when it appears on the screen but can't seem to get the transition property to do anything. Right now, the modal pops onto the screen in a jarring manner but I'd like to get it to slowly fade in. Here is my modal with the styles:
const customStyles = {
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
transition: "opacity .5s",
width: "90%",
maxHeight: "600px",
overflow: "auto",
padding: "40px",
maxWidth: "500px",
borderRadius: "10px",
boxShadow: "0px 0px 15px 1px gray",
},
};
<Modal
ariaHideApp={false}
isOpen={modalIsOpen}
onRequestClose={() => setIsOpen(false)}
style={customStyles}
contentLabel="Example Modal"
>
Anyone have any suggestions?
I think you need to put opacity as a property itself.
const customStyles = {
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
opacity: "20%",
transition: ".5s",
width: "90%",
maxHeight: "600px",
overflow: "auto",
padding: "40px",
maxWidth: "500px",
borderRadius: "10px",
boxShadow: "0px 0px 15px 1px gray",
},
};
I am using popover and currently, it is a plain rectangle which sits right below the box. I want to add small triangles like a pointer to make it nicer to look at and maybe add margin or padding-top so it will sit a bit lower from the box, just like this.
This is how I called the popover
<Grid item xs={12} sm={3} ref={divToRef}>
<Box pl={2} pt={1}>
<Typography className={classes.weight} variant="caption" color="textSecondary">
{t('search to').toUpperCase()}
</Typography>
</Box>
<Box pl={1}>
<AutoCompleteInput //some codes here />
</Box>
<Popover id="tofield" open={openTo} anchorEl={divToRef.current} onClose={handleClose} anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}} transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}>
<Typography className={classes.popoverText}>
Please enter destination
</Typography>
</Popover>
</Grid>
and I used withStyles to modify the paper
const Popover = withStyles((theme) => ({
root: {},
paper: {
backgroundColor: '#e02020',
boxShadow: '0 20px 15px -20px rgba(0, 0, 0, 0.15)',
borderRadius: theme.spacing(1),
padding: theme.spacing(2),
},
}))(MuiPopover)
How can I add the small triangle and adjust the position of transformOrigin (maybe add padding/margin) of the popover?
You can do this with adding this to the CSS:
.tooltip-top::before {
content: '';
position: absolute;
display: block;
width: 0px;
left: 50%;
top: 0;
border: 15px solid transparent;
border-top: 0;
border-bottom: 15px solid #5494db;
transform: translate(-50%, calc(-100% - 5px));
}
You can play around with those fields to customize where you want the arrow to be, how wide you want it and how tall you want the arrow. Check out this CodePen
I am trying to use react-autocomplete in my component. Everything is working fine results are shown. But I am not able to style the default input box.
this is autocomplete
<Autocomplete
getItemValue={this.getItemValue}
items={this.state.autocompleteData}
renderItem={this.renderItem}
value={this.state.value}
onChange={this.onChange}
onSelect={this.onSelect}
menuStyle={menuStyle}
/>
style for dropdown menu is working fine.
const menuStyle = {
borderRadius: '3px',
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
background: 'rgba(255, 255, 255, 0.9)',
padding: '2px 0',
fontSize: '90%',
position: 'fixed',
overflow: 'auto',
maxHeight: '50%', // TODO: don't cheat, let it flow to the bottom
"zIndex": 100,
};
i tried to add style as per answer in this question but it's not working.
how to increase input text box size in react-autocomplete?
How to add style to input box?
The object given to prop inputProps is used as props for the input, so you can give an object with a style property containing your menuStyles to that.
<Autocomplete
getItemValue={this.getItemValue}
items={this.state.autocompleteData}
renderItem={this.renderItem}
value={this.state.value}
onChange={this.onChange}
onSelect={this.onSelect}
inputProps={{ style: menuStyle }}
/>
inputProps={{ style: menuStyle }}
or you can do
styling={
borderRadius: '3px',
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
background: 'rgba(255, 255, 255, 0.9)',
padding: '2px 0',
fontSize: '90%',
position: 'fixed',
overflow: 'auto',
maxHeight: '50%', // TODO: don't cheat, let it flow to the bottom
"zIndex": 100,
}