我在react中有一个简单的开始项目，我正在尝试在反应中使用圆锥梯度。这是代码：
import React, {Component} from 'react';
export default class App extends Component {
constructor(props) {
super(props);
}
render(){
return(
<div>
<div style = {styles.progressCircle}></div>
</div>
);
}
}
const styles = {
progressCircle : {
width: "100px",
height: "100px",
borderRadius: "50%",
background: "conicGradient(red 4%, gray 0 8%, blue 0 17%,yellow 0 48%,purple 0 54%, orange 0)"
}
}
屏幕上没有任何显示。这是为什么？
最佳答案
更改了示例以运行代码片段
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
</head>
<body>
<div id="app_root"></div>
<script type="text/babel">
const styles = {
progressCircle : {
width: "200px",
height: "200px",
borderRadius: "50%",
background: "conic-gradient(red 4%, gray 0 8%, blue 0 17%,yellow 0 48%,purple 0 54%, orange 0)"
}
}
var Hello = React.createClass({
render: function() {
return(
<div style = {styles.progressCircle}></div>
);
}
});
ReactDOM.render(<Hello />, document.getElementById("app_root"));
</script>
</body>关于html - 圆锥形渐变CSS由于未知原因无法在React中使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59478510/