未捕获的ReferenceError：未定义翻译

Question

const styles = theme => ({
    imageContent: {
        transform: `${translate('-50%','-50%')}`
    }
});

我想为组件内的div应用CSS属性转换。那么如何从React Component引用CSS属性呢？ 未捕获的ReferenceError：未定义翻译。

Answer 1

之所以发生这种情况，是因为您在文字的占位符中包含了translate。但是，不需要占位符。您应该将其更改为：

transform: 'translate(-50%, -50%)'

您可以在此处了解有关模板文字的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 2

假设您有div：

<div style={{background: white}}> 
   Something
</div>

您还可以在以下位置初始化const：

const styleForaDiv = {background: "white"}
<div style={styleForaDiv}> </div>

请注意，所有样式都应驼峰化，因此background-image会变成backgroundImage，而您只需在样式字典中使用逗号即可：

const styleForaDiv = {backgroundImage: "url('')", backgroundSize: "cover" }