Uncaught ReferenceError: translate is not defined

Question

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

I want to apply CSS property translate for the div inside a component. So how to refer CSS properties from React Component? Uncaught ReferenceError: translate is not defined.

Answer 1

This is happening because you have included translate in your literal's placeholders. However, there's no need for the placeholder. You should change this to:

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

You can learn more about template literals here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals