Есть ли способ добавить встроенные стили с помощью важного переопределения?
style={
height: 20+'!important'
};
<div style={style}></div>
Это не работает, как я бы надеялся.
Есть ли способ добавить встроенные стили с помощью важного переопределения?
style={
height: 20+'!important'
};
<div style={style}></div>
Это не работает, как я бы надеялся.
20+'!important'
'20!important'
.
Когда вы просто укажете число, отреагируйте добавьте "px" для вас; но вы используете строку, поэтому вам нужно указать устройство. Кроме того, я уверен, что должно быть пространство между "важно" и любым остальным.
style={
height: 20 + 'px !important' // 20px !important
};
Очевидно, React не поддерживает это. Но я получил этот взлом, так как сделал свое исследование
<div ref={(node) => {
if (node) {
node.style.setProperty("float", "right", "important");
}
}}>
</div>
Удачи:)
Это единственный способ заставить его работать с React 16.
const id="unique_id";
<React.Fragment>
<style>
{'
#${id} {
background-color: transparent !important;
}
'}
</style>
<Frame id={id} />
</React.Fragment>
Я пробовал предложения выше для ширины, но не мог заставить его работать.
Это то, что работает для меня, я создал файл style.css и добавил в моем случае, ширина: 100%! важна для класса, а затем просто импортирует этот файл в свой компонент и вызываю этот класс, и он работа.
Да, я нашел способ сделать это, как уже упоминалось выше:
const styles = (theme: any) => ({
panelSize: {
height: 480,
width: 360,
},
progress: {
height: '120px !important',
margin: theme.spacing.unit * 2,
width: '120px !important'
}
});
Хорошая уловка, которая более понятна и более последовательна для других свойств CSS:
ref={(el) => el.style.setProperty(<property>, <value>, "important")}
Надеюсь, это поможет!
В документации пользовательского интерфейса материала есть еще один более понятный способ, который можно использовать с реакцией для переопределения поведения по умолчанию
1- Объявить постоянную переменную для стиля
const widthStyle = {
width:10
}
2- Используйте его с JSX для встроенного стиля
<div style={widthStyle}></div>
Я рекомендую использовать стилизованные компоненты, если у вас есть веские основания использовать !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; - повышает специфичность.