Uncaught ReferenceError: перевод не определен

Question

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

Я хочу применить свойство CSS translate для div внутри компонента. Так как же ссылаться на свойства CSS из компонента React? Uncaught ReferenceError: перевод не определен.

Answer 1

Предположим, у вас есть div:

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

Также вы можете запустить const раньше:

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

Обратите внимание, что все стили должны быть верблюжьими, поэтому фоновое изображение превращается в backgroundImage, и вы просто используете запятую внутри словаря стилей:

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

Answer 2

Это происходит потому, что вы включили translate в заполнители вашего литерала. Тем не менее, нет необходимости для заполнителя. Вы должны изменить это на:

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

Подробнее о литералах шаблона вы можете узнать здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals