score:2
i have a turnaround solution, which works (not that pretty). you would turn your withstyles
into a currying function, that takes keyframesprops
, and at your key frame definition you would use an iife that returns the object with its properties:
const usestyles = keyframesprops => makestyles((theme) => ({
... all other styles,
// you need to call an iife because keyframes doesn't receive a function
"@keyframes spinners": ((props) => ({
"25%": {
transform: `translatex(${props.translate}px) rotate(-90deg) scale(.5)`
},
"50%": {
transform: `translatex(${props.translate}px) translatey(${props.translate}px) rotate(-180deg)`
},
"75%": {
transform: `translatex(0) translatey(${props.translate}px) rotate(-270deg) scale(.5)`
},
to: {
transform: `rotate(-1turn)`
}
}))(keyframesprops)
}));
at your component you would define your classes
like:
const styleprops = {
duration: duration,
size: size,
color: color
}
const framesprops = {
translate: size * (1 - 0.3125)
}
const classes = usestyles(framesprops)(styleprops);
score:1
it sounds that mui has a bug around props in makestyles @keyframes
#16673
as olivier tassinari stated, this bug will be fixed in v5 where mui gonna use a new styling solution styled-components
rcf #22342.
the problem is even more general:
the arrow functions (with or without props) do not work within makestyles
#21011
passing the props to rules in your defined keyframes will fix it (after v5 has been available, hopefully)
"@keyframes spinners": {
"25%": {
transform: (props) =>
// console.log(props) and template generation will be created correctly.
`translatex(${props.translate}px) rotate(-90deg) scale(.5)`
},
// ...
}
until then you can use higher-order usestyle creator for embedding your keyframes, as @buzatto suggested.
or define your animation presets in your theme object and uses them globally around your project.
const theme = createmuitheme({
animation: {
presets: {
duration: 180,
// or even function
rotatedeg: (angle) => `{angle}deg`
//...
}
}
});
// usage
const usestyles = makestyles(theme => ({
"@keyframes spinners": {
"25%": {
transform: `translatex(${
theme.animation.presets.duration * 10
}px) rotate(${theme.animation.presets.rotatedeg(-90)}) scale(.5)`,
},
},
}
Source: stackoverflow.com
Related Query
- JSS keyframes not working when passing props
- If statement not working when passing props to functional component using Reactjs?
- Passing props to children not working In React
- withSyles HOC does not pass innerRef along with other props when passing through React.forwardRef
- Map function not working while passing props into React component (TypeScript, React and Next.js)
- props are not working when using map method in react.js
- Passing associative array as props not working
- why Passing Props in Private Route in ReactJs not working properly
- Material-UI: Property 'X' does not exist on type '{}' when passing props to makestyles in React
- Component not passing props to other component in same file when calling as const
- Passing props between components when one component is not a function?
- Button not executing both functions when passing state and props
- Keyframes animation not working when multiple instances of a Component rendered with different props?Width used for animation depends on a prop value
- Passing state into child component as props not working
- React onChange is not a function when passing method as props to child component
- Passing props in the Redirect component (React.js) not working as expected
- Function in component not working after passing in props from another component
- Getting toogleShow is not function when passing as props in react typescript functional component
- Passing props in react, image src not working
- Passing props to child component not working
- Page not rendering; When passing props to children using protected routes in react-router-dom
- ReactJS input type = "text" maxLength is not working when passed as props
- React - "Is not a function" error when passing function as props to functional component
- Url Parameters not able to recieved in component in react Js when Passing Props with Route
- Mobx observable and componentDidUpdate() not behaving as expected when passing props [Typescript React]
- React: Script tag not working when inserted using dangerouslySetInnerHTML
- React shouldComponentUpdate() is called even when props or state for that component did not change
- React memo components and re-render when passing function as props
- react-hook-form: Validation not working when using onBlur mode
- reactjs chrome extension message passing not working
More Query from same tag
- Could not find a declaration file for module 'react-bootstrap-table-next'
- Warning: Failed prop type: The prop `todos[0].title` is marked as required in `TodoList`, but its value is `undefined`
- Axios post with proxy on create-react-app hosting server doesn't work
- React + Gulp + Babelify
- React router error Cannot read property 'forEach' of undefined
- Form validation with multiple if statements on an onClick event
- how to listen dropdown value in another component in react js
- Get offset/height of a child component in React
- How to change the default port in react js
- why first two item is not working in react?
- React works without importing it
- How do I stack two containers when they're in different components?
- Password Post not working Reactjs with Nodejs server
- Formik: prevent touching fields (do not mark as .touched) on Submit
- How to show Modal when we click on it using reactjs?
- Layout of components in Reactjs
- How can I get when state change from other component
- scroll dyrect to top of the page in javascript
- Can i change input value populated from component state from console
- semantic ui: className doesn't work while style does
- How to switch between month and year in react-day-picker date range selector
- How to properly extend a styled component using TypeScript
- React-Autosuggest and ES5
- How to implement async authentication before redirect to login in React
- How can I put these object data to the mui-datatable?
- How to build react component can change view type
- What is the correct way of dispatching an action not tied to a component with Redux?
- Setting a state in react.js with two-way binding
- How to use single action type in different reducer function with createSlice method in redux-toolkit
- How i can create the function for the countdown in React native?