Какой самый простой способ получить данные с закругленными углами? - PullRequest
Новая
       7

Какой самый простой способ получить данные с закругленными углами?

0 голосов
/ 19 ноября 2018

В настоящее время я работаю над страницей React с семантическим интерфейсом и пытаюсь найти самый простой способ получить компоненты ввода с закругленными углами. Кажется, простое применение border-radius как обычно не работает; у кого-нибудь есть идеи получше?

(Для пояснения - я ищу в основном тот же взгляд на компоненте поиска в Semantic-React.)

1 Ответ

0 голосов
/ 28 ноября 2018

Стили и рендеринг для форм и элементов ввода в 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 prop.

Итак, как нам получить стили наэтот внутренний <input> без написания отдельного, более конкретного CSS, который переопределяет скомпилированные стили Semantic UI?К счастью, 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>

Надеюсь, вы найдете этот ответ на свой предыдущий вопрос вовремя, чтобы помочь вам.Я добавил быстрый скриншот ниже, чтобы показать, как это выглядит.

enter image description here

...