如何在React JSX中使用css clip-path

Question

我正面临着在React中呈现此样式的问题。

style="clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0 100%)"

我试图以style={{ clipPath: polygon("10% 0, 100% 0%, 100% 100%, 0 100%") }}的身份编写，但Iget polygone未定义

Answer 1

用引号将clipPath的值括起来，并删除内引号

style={{ clipPath: 'polygon(10% 0, 100% 0%, 100% 100%, 0 100%)' }}

完整示例：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  render() {
    return (
      <img
        src="https://www.w3schools.com/cssref/w3css.gif"
        alt="logo"
        style={{
          clipPath: "polygon(50% 0, 100% 50%, 50% 100%, 0 50%)"
        }}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

Answer 2

我通过编写以下代码style={{clipPath: `polygon(10% 0, 100% 0%, 100% 100%, 0 100%)`}}修复了这个问题