Реагировать на приоритет css
У меня есть компонент кнопки, который отображается только при необходимости (он предназначен для страницы вниз и поэтому не отображается на первой странице).
Я сделал это с помощью этого кода:
<button
id = "hidemeonmain"
onClick = {this.pageDown}
className = {this.state.count <2
? 'hidden'
: 'clean' }
>
<FontAwesomeIcon
icon = "angle-left"
size = "2x"
/>
</button>
Однако я хочу скрыть эту кнопку при запросе @media для max-width 736pxFOR ALL VALUES OF STATE.
Я делаю это, давая ему идентификатор и скрывая это в CSS. Однако, когда состояние обновляется, оно повторно показывает кнопку даже с !important в стиле @media display:none.
Я думал, что id и important будут иметь приоритет над общим классом.
Есть идеи, как решить эту проблему?
TIA
Обновлено: Я исправил это с помощью правильной кнопки !! и включил #id css.
#hidemeonmain {
display: none !important;
Я думаю, что происходит то, что при нажатии другой кнопки (приращение) это увеличивает состояние и, следовательно, влияет на изменение класса из троичного, которое переопределяет #id с помощью display: hidden !important;
@SumodhNair Я не понимаю, что вы имеете в виду. Я изменил вопрос, чтобы он был более конкретным, я имел в виду менее 736 пикселей
Да, выбор идентификатора важнее класса, в зависимости от того, как он объявлен. Пожалуйста, добавьте код и CSS, где вы это делаете. Если вы можете получить доступ к консоли, чтобы увидеть, что переопределяется, это также поможет.
@NickWild В целом идентификатор имеет приоритет над классом. Однако можете ли вы проверить в своем браузере свойства стиля и посмотреть, в каком порядке применяются стили?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
вместо того, чтобы скрывать его с помощью css, вы можете использовать свойство window.innerWidth, оно предоставит вам внутреннюю ширину браузера пользователей (если вы его console.info, вы увидите), затем вы можете использовать его для добавления скрытого класса к вашему элементу (в твое дело) твоя пуговица!
что-то вроде ниже:
<button
onClick = {this.pageUp}
className = {
this.state.count+3 > data.allMarkdownRemark.totalCount && // your condition
window.innerWidth < 736 // responsive rule represented by javaScript
? 'hidden'
: 'clean'}
>
<FontAwesomeIcon
icon = "angle-right"
size = "2x"
/>
</button>
и еще одно важное замечание.
рекомендуется хранить некоторые операционные коды в переменной. в нашем случае вам может потребоваться сохранить значение window.innerWidth в переменной перед вашим return( ... ) и использовать переменную внутри в return( ... ). что-то вроде ниже:
class myComponent extends React.Component {
... some methods and lifeCycles
render() {
const _innerWidth = window.innerWidth
return(
...some JSX
<button
onClick = {this.pageUp}
className = {
this.state.count+3 > data.allMarkdownRemark.totalCount && // your condition
_innerWidth < 736 // responsive rule represented by javaScript
? 'hidden'
: 'clean'}
>
<FontAwesomeIcon
icon = "angle-right"
size = "2x"
/>
</button>
...some more jsx
)
}
}
Это «почти сработало», но направило меня в правильном направлении - так должно быть или || не и &&. Какая отличная идея! Спасибо @a_m_dev
Вместо этого вы можете добавить свой класс, который является «скрытым» и «чистым» для разрешения выше, чем для мобильных устройств. Таким образом, он никогда не будет применяться для мобильных устройств, и вам не нужно добавлять какое-либо отдельное свойство для мобильных устройств как таковых.