How to apply CSS box-shadow in React?
In React, you can apply CSS box-shadow in two ways:
- Use the
styleprop and setboxShadowproperty to add a shadow effect on the element.
App.js
import React from 'react';
export default function App() {
return (
<div style={{ boxShadow: '5px 0 30px rgba(1,41,112,0.08)', padding: '10px' }}>
<h1>Title</h1>
<p>Content goes here.</p>
</div>
);
}
Output
In React, you have to convert CSS property to a camel case when applying inline styles to an element. You pass CSS properties and their values as key-value pairs to the style prop like style={{property1:value, property2:value, ...propertyn:value}}
- You define
box-shadowand other CSS properties in a separate CSS file and then import that file into the component.
App.js
import React from 'react';
import './appstyles.css';
export default function App() {
return (
<div className="box">
<h1>Title</h1>
<p>Content goes here.</p>
</div>
);
}
appstyles.css
div.box {
box-shadow: 5px 0 30px rgba(1, 41, 112, 0.08);
padding: 10px;
}
Here, we have defined CSS properties in a file and then imported them into the component file using the import statement.
