reactjs – React.js css box-shadow无效

发布时间：2020-12-15 09:36:24 所属栏目：百科来源：网络整理

导读：我正在使用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,{

我正在使用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库,因为我现在想要保持简单.

解决方法

这里的问题不是boxShadow本身,而是在文件中设置样式的位置.

我倾向于把我的风格：
1.在组件上方的常数中,
2.在Component类中的“getStyles”类型方法内部,
3.通过classNames,OR访问的更传统的scss文件
4.只是内联样式

选项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>
);

这是选项#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>
    );
  }
}

“`

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!