未捕获的ReferenceError：未定义translate

Question

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

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

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>

请注意，所有样式都应该是camelCased，因此background-image变成了backgroundImage，你只需在样式字典中使用逗号：

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