Условно переопределить стиль AntD Select в CSS
У меня есть форма, содержащая компонент antD Select.
<Select
name = "SeasonId"
onChange = {onSeasonChange}
placeholder = "Choose Season"
>
// Select Options
</Select>
Я хочу иметь возможность изменять цвет границы (и тени блока) в зависимости от условия. Я могу изменить/переопределить нужный мне css, добавив следующее в отдельный файл CSS:
.ant-select-selector:hover {
border-color: #1f9643e5 !important;
}
.ant-select-focused .ant-select-selector,
.ant-select-selector:focus,
.ant-select-selector:active,
.ant-select-open .ant-select-selector {
border-color: #1f9643e5 !important;
outline: 0 !important;
-webkit-box-shadow: 0 0 0 2px rgba(49, 139, 54, 0.342) !important;
box-shadow: 0 0 0 2px rgba(49, 139, 54, 0.342) !important;
}
Это меняет стиль на то, что мне нужно: #
Однако я хочу применить это переопределение стиля к Select только в том случае, если в коде выполняется определенное условие (т.е. у меня есть логическое состояние isEditMode). Я могу упустить что-то очевидное, но интересно услышать любые предложения.
Извините, я не понимаю, что именно вы имеете в виду? Как бы вы предложили мне улучшить его?
Вы запрашиваете предложения по улучшению кода, который, как вы говорите, уже работает, вы упоминаете о применении стилей, если выполняется условие, но не даете дальнейших объяснений, и у вас есть опечатки.
«запрашивать предложения по улучшению кода, который, как вы говорите, уже работает» - я думал, что именно так должно было работать переполнение стека ...? Приведите пример того, куда вы попали, и спросите, как улучшить, чтобы соответствовать моим требованиям? Я признаю, что иногда я не самый лучший орфограф, поэтому был бы признателен, если бы вы могли посоветовать, где у меня опечатки ??
Я ошибся, за тебя проголосовали. Опечатка в строке 3 "отдельно". Из того, что я слышал до сих пор от модов, следует избегать запросов предложений для вашего кода, я понимаю вашу точку зрения, и есть тонкая грань между предложением и решением.
Чтобы на самом деле ответить на вопрос, я бы порекомендовал изучить собственные HTML-решения для ввода формы. Вы можете использовать отключенный атрибут для всех ваших входных данных формы, например, когда режим редактирования отключен, и стилизовать их на основе этого
Спасибо за отзыв, я добавил немного больше деталей и исправил неизбежную опечатку.
Ответы 1
Используйте имя родительского класса для своего пользовательского кода CSS и примените имя класса к родительскому элементу, если условие равно true.
Пример, в вашем CSS-файле
.example.ant-select-selector:hover {
border-color: #1f9643e5 !important;
}
и в вашем файле JSX,
<div className = {`${conditon ? 'example' :''}`} >
<Select />
</div>
Спасибо за это....! Когда я вернусь, я попробую, но, похоже, это имеет смысл! Я обновлю, как только у меня будет возможность попробовать ваше предложение.
Мне нравится это решение. Я бы изменил одну вещь: className = {`${isEditMode ? 'example' :''}`} на disabled = {isEditMode ? "false" : "true"}. Также @CJH старайтесь избегать использования !important, пытаясь решить проблему специфичности, с которой вы столкнулись.
Свойство className не должно изменяться, оно задано для стиля. Если вы хотите отключить Select, чтобы пользователь не мог взаимодействовать, вам нужно предоставить disabled prop для Select Component. Кстати, он принимает логические значения, поэтому вы должны указывать true или false без кавычек.
Я реализовал ваше предложение, но, боюсь, все еще не повезло. Я буду продолжать копать и обновлять, если найду решение.
Немного поковырялся, попробовал кое-что и все заработало. По сути, это то, что вы указали выше, однако обертка DIV не требовалась... Мне удалось добавить условие в свойство className компонентов Select. Также немного возился с css. Спасибо за это Rahuuzz!
Этот вопрос кажется довольно самоуверенным из-за переполнения стека, я думаю, вы получите отрицательный голос