I’ve been recently trying to use JSS in my React project. My code is of a button that requires the transformY() property as an animation when you hover but it isn’t working. This is my code and the errors I receive when compiling.
import { createUseStyles } from 'react-jss' import React, { useState } from 'react'; const useStyles = createUseStyles({ button: { '&hover': { transform: translateY(0.5) } }, clickButton: { background: '#b60000', transform: translateY(0.5) } }) function Button() { const [button, toggleButton] = useState(useStyles.button); return ( <div> <svg width="900" height="600"> <circle cx="120" cy="120" r="150" stroke="grey" stroke-width="3" fill="grey"/> <circle cx="120" cy="120" r="100" stroke="red" stroke-width="3" fill="red" className={button} onClick={() => toggleButton(useStyles.clickButton)}/> </svg> </div> ) } export default Button
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
ERROR in srcButton.js
Line 7:24: ‘translateY’ is not defined no-undef
Line 13:20: ‘translateY’ is not defined no-undef
Search for the keywords to learn more about each error.
webpack compiled with 1 error
Advertisement
Answer
You need to add single quote or double quote while defining the CSS.
So use like below
transform: 'translateY(0.5)'
Full code for style:
const useStyles = createUseStyles({ button: { '&hover': { transform: 'translateY(0.5)' } }, clickButton: { background: '#b60000', transform: 'translateY(0.5)' } })