Linear Gradient CSS Not Working in ReactJS

Question

I am trying to create a linear gradient css style for a button and for some reason it's not working. I think it may be a react issue, not really sure.

Code:

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;

It just renders as a button that has no styles to it. If I leave out the ''s like so:

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

react says this: Unexpected token, expected "," between to right.

Regards

check this stackoverflow.com/a/59278560/6544460 that will help you. — akhtarvahid
– akhtarvahid, Commented Dec 11, 2019 at 3:38

akhtarvahid · Accepted Answer · 2019-12-11 03:36:34Z

2

Try this, it's working

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

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

It seems you have not used text or something inside your div to which you are applying styling.

answered Dec 11, 2019 at 3:36

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthew Over a year ago

-_-, totally looked over the div without anything there... Thanks this works!

Gabriel Vasile · Accepted Answer · 2019-12-11 03:41:43Z

1

You can't put a div inside a button, but you can put an image.

<img src="...." />

Or instead of a button, you can use a link

const btnFill = {
  backgroundImage: 'linear-gradient(to right, #E040FB, #00BCD4)';
}
<a style={btnFill} href="/tracker/nwa/lab/add">Let's get started!</a>

edited Dec 11, 2019 at 3:41

answered Dec 11, 2019 at 3:28

Gabriel Vasile

2,3681 gold badge18 silver badges28 bronze badges

1 Comment

Matthew Over a year ago

Thanks for this, I removed the div from the button and applied the style directly to the button itself.

Collectives™ on Stack Overflow

Linear Gradient CSS Not Working in ReactJS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related