时间戳

首页 > 解决方案 > 线性渐变 CSS 在 ReactJS 中不起作用

css - 线性渐变 CSS 在 ReactJS 中不起作用

问题描述

我正在尝试为按钮创建线性渐变 css 样式，但由于某种原因它不起作用。我认为这可能是一个反应问题，不太确定。

代码：

import React from "react";

var bg = {
  background: "#FFFFFF"
}

var btnFill = {
  background: 'linear-gradient(to right, #E040FB, #00BCD4)'
}


class ConsolePage extends React.Component {

  render() {
    return <div style={bg}>
      <div class="uk-sticky-placeholder"></div>
        <div class="uk-width-1-1">
          <div className="uk-grid">
            <div className="uk-margin-left uk-margin-top uk-margin-bottom uk-width-1-3@m">
              <div className="uk-margin-xlarge-top">
                    <div className="my-3" align="center">
                    <h3 className="mb-1">placeholder text</h3>
                        <div className="uk-grid">
                          <div>
                            <button href="/docs">
                              Learn More
                              <div className="btn"></div>
                            </button>
                          </div>
                          <div>
                            <button href="/tracker/nwa/lab/add">
                              Let's get started!
                              <div className="" style={btnFill}></div>
                            </button>
                          </div>
                        </div>
                    </div> 
                </div>
            </div>


          </div>

              </div>
      </div>
  }
}

export default ConsolePage;

它只是呈现为一个没有样式的按钮。如果我像这样省略''s：

var btnFill = {
  background: linear-gradient(to right, #E040FB, #00BCD4)
}

反应是这样说的：Unexpected token, expected ","之间to right。

问候

标签： cssreactjs

解决方案

试试这个，它的工作

const mystyle={
  background: 'linear-gradient(to right, #430089, #82ffa1)'
}

<div style={mystyle}>
    Linear Gradient
</div>

似乎您没有在要应用样式的 div 中使用文本或其他内容。

推荐阅读