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.
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
Suppose you have div:
<div style={{background: white}}>
Something
</div>
Also you can initiate a const before:
const styleForaDiv = {background: "white"}
<div style={styleForaDiv}> </div>
Notice that all styles should be camelCased, so background-image turns into backgroundImage and you just use comma inside style dictionary:
const styleForaDiv = {backgroundImage: "url('')", backgroundSize: "cover" }