I'm trying to apply an animation to an arrow in a react component using JSS. I can't seem to get the keyframes correct and getting the error TypeError: container.addRule(...).addRule is not a function
const useStyles = createUseStyles({
'#keyframes sdb05': {
from: {
transform: 'rotate(-45deg) translate(0, 0)',
opacity: 0
},
to: {
transform: 'rotate(-45deg) translate(-20px, 20px)',
opacity: 1
}
},
arrow:{
animationName: '$sdb05',
zIndex: 2,
display: 'inline-block',
'-webkit-transform': 'translate(0, -50%)',
transform: 'translate(0, -50%)',
color: '#fff',
letterSpacing: '.1em',
textDecoration: 'none',
transition: 'opacity .3s',
width: 50,
height: 50,
backgroundColor: 'rgb(255,255,255, 0.5)',
borderRadius: '50%',
'&:after': {
position: 'absolute',
bottom: 0,
left: 0,
content: '',
width: '100%',
height: '80%',
background: '-webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%)'
},
'& a': {
'& span':{
position: 'absolute',
top: 8,
left: '50%',
width: 24,
height: 24,
marginLeft: -12,
borderLeft: '2px solid #000',
borderBottom: '2px solid #000',
'-webkit-transform': 'rotate(-45deg)',
transform: 'rotate(-45deg)',
'-webkit-animation': 'sdb05 1.5s infinite',
'animation': 'sdb05 1.5s infinite',
boxSizing: 'border-box'
},
'&:hover': {
opacity: .5
}
}
}
});
const Arrow = () => {
const classes = useStyles();
return (
<div className={classes.arrow}>
<span></span>
</div>
);
};
How can I correctly set my keyframes to enable the animation?
The animation should function like this: link
If you are using JSS v10 or higher, the code you posted now is correct, you can see what is being generated in the browser and here https://cssinjs.org/repl
Now you have some problem with the actual animation, not with JSS.
Add the #keyframes on the top level, not inside of the rule
Related
import { Flowchart } from '#ant-design/flowchart';
import "#ant-design/flowchart/dist/index.css";
const IndicatorNode = (props:any) => {
const { size = { width: 120, height: 50 }, data } = props;
const { width, height } = size;
const { label = 'john', stroke = '#ccc', fill = '#fff', fontFill, fontSize } = data;
return (
<div
className="indicator-container"
style={{
position: 'relative',
display: 'block',
background: '#fff',
border: '1px solid #84b2e8',
borderRadius: '2px',
padding: '10px 12px',
overflow: 'hidden',
boxShadow: '0 1px 4px 0 rgba(0,0,0,0.20)',
width,
height,
borderColor: stroke,
backgroundColor: fill,
color: fontFill,
fontSize,
}}
>
<div style={{ color: fontFill }}>{label}</div>
</div>
);
};
export designer = () => {
return (
<div style={{ height: 600 }}>
<Flowchart
onSave={(d) => {
console.log(d);
}}
toolbarPanelProps={{
position: {
top: 0,
left: 0,
right: 0,
},
}}
scaleToolbarPanelProps={{
layout: 'horizontal',
position: {
right: 0,
top: -40,
},
style: {
width: 150,
height: 39,
left: 'auto',
background: 'transparent',
},
}}
canvasProps={{
position: {
top: 40,
left: 0,
right: 0,
bottom: 0,
},
}}
nodePanelProps={{
position: { width: 160, top: 40, bottom: 0, left: 0 },
defaultActiveKey: ['custom'], // ['custom', 'official']
registerNode: {
title: 'abc',
key:"abc",
nodes: [
{
component: IndicatorNode,
popover: () => <div>abcs</div>,
name: 'custom-node-indicator',
width: 120,
height: 50,
label: 'abc',
},
],
},
}}
detailPanelProps={{
position: { width: 200, top: 40, bottom: 0, right: 0 },
}}
/>
</div>
);
}
I want to create new custom code with api configurations and once I click on that node it shows the editable custom properties on right panel.
in custom node of #ant-design/flowchart can I add my custom editable properties? that are showing on right panel once I clink on node.. Can someone provide me any reference for that?
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 use the material UI "createTheme" function. When ı write overrides for button and switch it's doesn't work. Material UI's None of the overrides features work but the theme palette, font-size working. Why it doesn't work? Thanks in advance.
// My overrides
overrides: {
MuiButton: {
primary: {
background: "pink",
},
sizeSmall: {
height: 22.5,
fontSize: 10,
padding: "0 15px",
},
sizeLarge: {
height: 37,
padding: "0 30px",
fontSize: 16,
},
text: {
background: "#1AD971",
borderRadius: 4,
border: 0,
color: "white",
padding: "0 22px",
height: 30,
textAlign: "center",
lineHeight: 1,
fontSize: 14,
fontWeight: 400,
"&:hover": {
backgroundColor: "#0BBF5D",
},
},
contained: {
backgroundColor: "#FFFFFF",
color: "#000000",
borderRadius: 30,
},
outlined: {
color: "#1AD971",
border: "1px solid #1AD971",
borderRadius: "15px",
},
},
MuiSwitch: {
switchBase: {
color: "#73889D",
},
colorSecondary: {
"&$checked": {
color: "#FFFFFF",
},
},
track: {
opacity: 1,
backgroundColor: "#213348",
"$checked$checked + &": {
opacity: 1,
backgroundColor: "#FFC231",
},
},
},
},
If you are working on MUI version 5, as mentioned in the comment above, you should be using the below code
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
border: '1px solid #ff4742',
background: 'white',
borderRadius: 12,
border: 0,
color: 'black',
height: 48,
padding: '0 30px',
fontWeight: 'bold',
boxShadow: '1px 2px 4px rgb(0 0 0 / 10%)',
}
}
},
}});
I've now been working in circles trying to understand what is happening. I'm making a design library using storybook with Tailwind. I can't seem to get the :before pseudo class to work. No matter where I place it in the styling, then it's never rendered.
An example is that I am trying to make a component which uses react-slick, and want to style the navigation:
'& .slick-dots': {
bottom: -30,
display: 'block',
left: 4,
listStyle: 'none',
margin: 0,
padding: 0,
position: 'absolute',
textAlign: 'center',
width: '100%',
'& li': {
cursor: 'pointer',
display: 'inline-block',
height: 20,
margin: '0 5px',
padding: 0,
position: 'relative',
width: 20,
'& button': {
border: 0,
background: 'transparent',
display: 'block',
height: 20,
width: 20,
outline: 'none',
lineHeight: 0,
fontSize: 0,
color: 'transparent',
padding: 5,
cursor: 'pointer',
'&:before': {
position: 'absolute',
top: 0,
left: 0,
content: '',
width: 20,
height: 20,
fontFamily: 'sans-serif',
fontSize: 20,
lineHeight: 20,
textAlign: 'center',
color: '#000000',
opacity: 0.75,
display: 'inline-block',
},
},
},
},
Found the problem. The :before pseudo class won't render unless there is content, but in the case of css in js, then content needs to look like this content: '"text"', and not content: 'text',
Another way is to define your content in the tailwind.config.js
theme: {
extend: {
content: {
'arrowNeonGreen': 'url("../src/images/icons/arrow-neon-green.svg")',
},
fontSize: {
...
You can render it using the following className. Make sure to include an inline-block and width.
<Link className="after:content-arrowNeonGreen after:inline-block after:w-8">Learn More</Link>
You can also apply a hover state like this hover:after:content-arrowNeonGreen
<Link className="hover:after:content-arrowNeonGreen after:content-arrowBlack after:inline-block after:w-8">Learn More</Link>
to get the :before class to work, you have to use tailwindcss-pseudo-elements package to customize your pseudo elements. check the docs below
https://www.npmjs.com/package/tailwindcss-pseudo-elements