React.js css框-阴影不起作用
React.js css框-阴影不起作用
提问于 2017-07-09 18:04:01
我使用的是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或样式组件库，因为我现在想让事情变得简单。
回答 2
Stack Overflow用户
发布于 2019-04-02 13:54:54
只需实现上述返回方法中的样式。
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>
);
}
}Stack Overflow用户
发布于 2018-02-26 07:57:39
这里的问题不是boxShadow本身，而是样式在文件中的设置位置。
我倾向于将我的样式放在: 1.在组件之上的常量中，2.在component类中的"getStyles“类型方法中，3.在通过classNames访问的更传统的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>
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44995217
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号