Какой самый простой способ получить входные данные с закругленными углами?
В настоящее время я работаю над страницей React с семантическим пользовательским интерфейсом и изо всех сил пытаюсь найти самый простой способ получить компоненты ввода с закругленными углами. Обычное применение border-radius не работает; у кого-нибудь есть идеи получше?
(Чтобы уточнить - я ищу в основном такой же взгляд на компонент поиска в Semantic-React.)
Например - <Input style = {{borderRadius: '50px'}} />
и что вы видите в инструментах разработчика для этого стиля css? это отменяется? чем-то конкретным?
Ответы 1
Стили и рендеринг для элементов форм и ввода в SUI и SUIR становятся немного сложнее. Особенно после того, как вы абстрагируете визуализированную разметку до компонентов React.
Что на самом деле происходит в Semantic UI React? Давайте взглянем:
// This...
<Input placeholder='Search...' />
// Renders this in the DOM
<div class = "ui input">
<input placeholder = "Search..." type = "text">
</div>
Пока имеет смысл. Но, изучив это поближе, мы поймем, в чем заключается наша проблема. Как мы думаем, где будут применяться встроенные стили, когда мы будем использовать опору styles? На внешнем <div> или на <input>?
// This...
<Input
placeholder='Search...'
styles = {{borderRadius: '100px'}}
/>
// Renders this in the DOM - Not what we want :(
<div class = "ui input" style = "border-radius: 100px;">
<input placeholder = "Search..." type = "text">
</div>
Теоретически все вышеперечисленное могло бы быть приемлемым, если бы стили для входных данных семантического пользовательского интерфейса были исключительно на родительском div.ui.input. Не все из них на самом деле. Некоторые стили явно нацелены на дочерний <input> с .ui.input > input {...}, в этом и заключается наша проблема, если мы хотим передавать стили исключительно в React с опорой styles.
Итак, как нам получить стили на этот внутренний <input> без написания отдельного, более конкретного CSS, который переопределяет скомпилированные стили семантического пользовательского интерфейса? К счастью, Semantic UI React действительно позволяет передавать <input> как React children. Взгляните на это:
// This...
<Input placeholder='Search...'>
<input style = {{borderRadius: '100px'}} />
</Input>
// Gives us this, which is what we want!
<div class = "ui input">
<input placeholder = "Search..." type = "text" style = "border-radius: 100px;"> .
</div>
Надеюсь, вы найдете этот ответ на свой предыдущий вопрос вовремя, чтобы помочь вам. Я добавил быстрый снимок экрана ниже, чтобы показать, как это выглядит.
Это фантастика, спасибо большое - это полное решение моей проблемы!
эффект значка отсутствует
Мое решение - добавить значок после ввода, например <i aria-hidden = 'true' class = 'lock icon' />, и это работает
Как вы применяете
border-radius?