How to add changes to css file?

Question

css

In a React app, I have a calendar (react-data-picker). But it opens behind other elements on the page. To do this, you need to change its z-index.
I have a style.scss file that has the imports added:

@import 'display';
@import 'table';
@import 'footer';
...

I need to add the following css code. To do this, I created the _datapicker.scss file, added the code to it:

.react-datepicker-popper {
  z-index: 100;
}

connected via import in style.scss:

...
@import 'datapicker';

and built:
npm run build
After the build, I received the style.css file , added it to the original project, but did not see any changes with the calendar. The calendar opens below other items. How to solve the problem that the calendar opens on top of other elements?

Answer 1

I solved the problem by adding a property to the component directly in the component:

const customStyles = {
  zIndex: 100
};

class FormReport extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
    ...
     <div style={customStyles}>                
       <DatePicker style={customStyles}/>
     </div>
    ...
)}