React.js css box-shadow not working

Question

I am using react.js v15.6.1

I have a css file with a style like below:

.well {

    -webkit-box-shadow: 1px 3px 1px #9E9E9E;
    -moz-box-shadow: 1px 3px 1px #9E9E9E;
    box-shadow: 1px 3px 1px #9E9E9E;

}

I tried to use it inside react.js but not working like follows:

import React, { Component } from "react";
var Bootstrap = require('react-bootstrap')

export default class Title extends Component {

  render() {

    return (

      <div style={styles.well}>
              <div style={styles.header}>Business Background</div>
              <hr/>
              <p>
                  hello hello
             </p>    
      </div>


    );
  }
}

const styles = {

  well:{
    webkitBoxShadow: "1px 3px 1px #9E9E9E",
    mozBoxShadow: "1px 3px 1px #9E9E9E",
    boxShadow: "1px 3px 1px #9E9E9E"

  }

};

even I changed to just

  well:{
    boxShadow: "1px 3px 1px #9E9E9E"
  }

it doesn't work too

If you look at picture above, Hello 1 is from generated from react and Hello 2 is from css file

I do not want to use css-loader or styled-components library as I want to keep things simple for now.

Answer 1

Just implement the styles above return method.

import React, { Component } from "react";
var Bootstrap = require('react-bootstrap')

export default class Title extends Component {
    render() {
        var well={
            boxShadow: "1px 3px 1px #9E9E9E"
        }
        var header={
            color:"#000",
            fontWeight:"550"
        }

        return (
            <div style={well}>
                <div style={header}>Business Background</div>
                <hr/>
                <p>hello hello</p>
            </div>
        );
    }
}

Answer 2

The issue here wasn't the boxShadow itself but where the styles were set up in the file.

I tend to put my styles: 1. in a constant above the component, 2. inside of a "getStyles" type method in the Component class, 3. inside of a more traditional scss file accessed through classNames, OR 4. just inline the styles

Option 1:

const GREY = "#9E9E9E";

const styles = {
  header: {
    // styles go here!
  },
  well: {
    boxShadow: `1px 3px 1px ${GREY}`,
  },
};

const Title = props => (
  <div style={styles.well}>
    <div style={styles.header}>Business Background</div>
    <hr />
    <p>hello hello</p>
  </div>
);

Here is option #2:

class Title extends Component {
  getStyles = () => {
    const GREY = "#9E9E9E";

    return {
      header: {
        // styles go here!
      },
      well: {
        boxShadow: `1px 3px 1px ${GREY}`,
      },
    };
  };

  render() {
    const styles = this.getStyles();

    return (
      <div style={styles.well}>
        <div style={styles.header}>Business Background</div>
        <hr />
        <p>hello hello</p>
      </div>
    );
  }
}

```