React.js css box-shadow无效

Question

我正在使用react.js v15.6.1

我有一个css文件，其格式如下：

.well {

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

}

我试图在react.js中使用它，但不能像下面那样工作：

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"

  }

};

即使我改为

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

它也不起作用

如果你看一下上面的图片，Hello 1来自react，Hello 2来自css文件

我不想使用css-loader或styled-components库，因为我现在想要保持简单。

Answer 1

只需实现上述return方法的样式即可。

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>


);

} }