Trying to use CSS statements with function-like fo…

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

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)'
    }
})

Trying to use CSS statements with function-like formatting in JSS but I get an error

Advertisement

Answer