尝试在JSS中使用具有函数式格式的CSS语句，但我得到一个错误

Question

我最近一直在尝试在我的React项目中使用JSS。我的代码是一个按钮，当你悬停时需要transformmy()属性作为动画，但它不工作。这是我的代码和我编译时收到的错误。

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

第7:24行:'translateY'未定义no-undef
第13:20行:'translateY'未定义no-undef

搜索关键字以了解每个错误的更多信息。

webpack编译出错

Answer 1

在定义CSS时需要添加单引号或双引号。

所以在

下面使用like

transform: 'translateY(0.5)'

style的完整代码:

const useStyles = createUseStyles({
button: {
'&hover': {
transform: 'translateY(0.5)'
}
},

clickButton: {
background: '#b60000',
transform: 'translateY(0.5)'
}
})