React maskImage inline не работает - то же изображение работает как backgroundImage - PullRequest
Новая
       14

React maskImage inline не работает - то же изображение работает как backgroundImage

1 голос
/ 20 октября 2019

Я применяю встроенный стиль к div в React

Если я делаю 

<div style={{ backgroundImage: `url(${process.env.IMAGES}/${ID}.png)` }}>{children}</div>

, он работает нормально, но при изменении на 

<div style={{ maskImage: `url(${process.env.IMAGES}/${ID}.png)` }}>{children}</div>

стильдаже не отображается в коде инспектора.

Что может быть не так? Спасибо

1 Ответ

1 голос
/ 20 октября 2019

Поскольку для работы маски нужны префиксы вендоров, вам необходимо добавить их вручную: 

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>
...