Как добавить изменения в css файл?

Question

[aznhautroalvyl]

В React приложении у меня есть календарь (react-data-picker). Но он открывается за другими элементами на странице. Для этого необходимо поменять его z-индекс.
У меня есть файл style.scss, в котором добавлены импорты:

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

Мне необходимо добавить следующий css код. Для этого я создал файл _datapicker.scss, добавил в него код:

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

подключил через import в style.scss:

...
@import 'datapicker';

и забилдил:
npm run build
После сборки получил файл style.css, добавил его в исходный проект, но никаких изменений с календарём не увидел. Календарь открывается под другими элементами. Как решить проблему, чтобы календарь открывался поверх других элементов?

Comments

[Алексей Коновалов]

кеш?

[aznhautroalvyl]

Алексей Коновалов, почистить кэш? Как? Поясните пожалуйста

[Martovitskiy]

проверьте z-index у блока-родителя. Пользуйтесь DevTools

[Алексей Коновалов]

aznhautroalvyl, в хром это ctrl+F5
но чтобы небыло проблем у остальных пользователей - по время вставки файла, добавьте вконце style.css?3 произвольную цифру

[aznhautroalvyl]

Martovitskiy, либо не нашёл, либо не указан у блока-родителя

[aznhautroalvyl]

Алексей Коновалов, вставляю файл, ввёл имя style.css3, PhpStorm пишет что файл не ассоциирован с другими типами файлов. ctrl+F5 не помогло
Я вставлял файл, не убирая старый. Просто перезаписывал его. Возможно из-за этого проблемы?

[Евгений Журов]

aznhautroalvyl, так не style.css3, а style.css?3. И не в имени самого файла, а в подключении. Типа
<link rel="stylesheet" href="style.css?3">

[Даниил Маслов]

aznhautroalvyl, для работы z-index должно быть указано позиционирование. «Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.». Возможно, что у вас оно не задано.

[tyzberd]

А как насчет такого, там случайно нет? https://habrastorage.org/webt/en/my/ow/enmyowhi38a...

[aznhautroalvyl]

Евгений Журов, у меня приложение на React, import происходит следующим образом:
import '../css/style.css';
Добавил в конец ?3, получил ошибку при сборке

webpack-ом

Module parse failed: /home/aznha/Документы/duma/frontend/src/components/css/style.css?3 Unexpected token (1:0)
You may need an appropriate loader to handle this file type

Answer 1

[aznhautroalvyl]

Проблему решил, добавив компоненту свойство прямо в компоненте:

const customStyles = {
  zIndex: 100
};

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