! важные встроенные стили в реагировании

Ответ 1

20+'!important' '20!important'.

Когда вы просто укажете число, отреагируйте добавьте "px" для вас; но вы используете строку, поэтому вам нужно указать устройство. Кроме того, я уверен, что должно быть пространство между "важно" и любым остальным.

style={
  height: 20 + 'px !important' // 20px !important
};

Ответ 2

Очевидно, React не поддерживает это. Но я получил этот взлом, так как сделал свое исследование

    <div ref={(node) => {
      if (node) {
        node.style.setProperty("float", "right", "important");
      }
    }}>                    
    </div>

Удачи:)

Ответ 3

Это единственный способ заставить его работать с React 16.

const id="unique_id"; 
<React.Fragment>
    <style>
      {'
#${id} {
  background-color: transparent !important;
}
      '}
    </style>
    <Frame id={id} />
</React.Fragment>

Ответ 4

Я пробовал предложения выше для ширины, но не мог заставить его работать.

Это то, что работает для меня, я создал файл style.css и добавил в моем случае, ширина: 100%! важна для класса, а затем просто импортирует этот файл в свой компонент и вызываю этот класс, и он работа.

Ответ 5

Да, я нашел способ сделать это, как уже упоминалось выше:

const styles = (theme: any) => ({
panelSize: {
    height: 480,
    width: 360,
},
progress: {
    height: '120px !important', 
    margin: theme.spacing.unit * 2,
    width: '120px !important'
}

});

Ответ 6

Хорошая уловка, которая более понятна и более последовательна для других свойств CSS:

ref={(el) => el.style.setProperty(<property>, <value>, "important")}

Надеюсь, это поможет!

Ответ 7

В документации пользовательского интерфейса материала есть еще один более понятный способ, который можно использовать с реакцией для переопределения поведения по умолчанию

1- Объявить постоянную переменную для стиля

const widthStyle = {
  width:10
}

2- Используйте его с JSX для встроенного стиля

<div style={widthStyle}></div>

Ответ 8

Я рекомендую использовать стилизованные компоненты, если у вас есть веские основания использовать !important, поскольку реквизиты стиля не поддерживают !important и, вероятно, не будут в будущем.

Вот пример, где мы перезаписываем Semantic-UI padding на grid columns. Вы можете фактически опустить !important, так как "увеличения специфичности" вполне достаточно.

const StyledColumn = styled.div(({size}) => ({className: '${size} wide column'})'
    &&&&& {
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
    }
'
<StyledColumn size="three"></StyledColumn>

& && & amp; & lt; - повышает специфичность.