React.js css box-shadow not working
I am using response.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 response.js but didn't work like this:
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
well:{
boxShadow: "1px 3px 1px #9E9E9E"
}
it doesn't work either 
If you look at the image above, Hello 1 is from generated from react and Hello 2 is from css file
I don't want to use the css-loader or styled-components library as I want to keep things simple.
+3
source to share
1 answer
The problem here was not in the boxShadow itself, but in where the styles were created in the file.
I tend to put my styles: 1. in a constant above the component, 2. inside a method like getStyles in the Component class, 3. inside a more traditional scss file accessible via class names, 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>
);
}
}
``,
0
source to share