I am applying inline style to a div in React
If I do
<div style={{ backgroundImage: `url(${process.env.IMAGES}/${ID}.png)` }}>{children}</div>
it works fine, but on changing to
<div style={{ maskImage: `url(${process.env.IMAGES}/${ID}.png)` }}>{children}</div>
the style doesn't even show in the code inspector.
What could be wrong? Thank you
Since the mask needs vendor prefixes to work, you'll need to add them manually:
const Mask = ({ mask, children }) => (
<div style={{
WebkitMaskImage: mask,
maskImage: mask
}}>
{children}
</div>
)
ReactDOM.render(
<Mask mask="linear-gradient(black, transparent)">The big bad fox</Mask>,
root
)
div {
font-size: 2em;
}
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>