Компонент в стиле React с несколькими классами

#javascript #reactjs #typescript #frontend #styled-components

#javascript #reactjs #typescript #интерфейс #styled-компоненты

Вопрос:

Я собираюсь создать небольшой проект в react с использованием стилизованного компонента, однако у меня есть вопрос по использованию этого пакета. Я хотел бы создать стилизованный компонент, который объединяет несколько классов, но я не знаю, как это сделать, например :

 <div class="search-input search-input-small">

Как превратить его в стилизованный компонент? В css есть два разных класса, но в стилизованном компоненте я не знаю.

Спасибо.

1. Я думаю, вам нужно подумать о объединенных стилях обоих классов и использовать props для динамической настройки вашего стиля. Что эти классы делают в обычном CSS?

2. мы можем ежедневно получать коды @Aib пример, .search-input { background-color: blue; } .search-input-small { color: white; }

3. Сначала определите const SearchInput = styled.div` backgroundColor: blue;` , а затем определите const SearchInputSmall= styled(SearchInput)` color: white;` и используйте SearchInputSmall стилизованный компонент вместо div с несколькими классами.

Ответ №1:

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

 const Div = styled.div`
     /// styles for className -> search-input
    }`
const SmallDiv = styled(Div)`
    /// styles for className -> search-input-small
   `

Кроме того, если вы знаете SASS, вы можете структурировать свой CSS с помощью вложенности с помощью amp; . например

  const Div = styled.div`
     .search-input {
          //CSS
          amp;-small {
             //CSS
           }
         
         }
     `

1. Здравствуйте, спасибо за ответ, но как это сделать, если у меня есть другой div, который используется .search-input-small с другим классом, например hello-world search-input-small ? Должен ли я дублировать css снова и снова?

2. Вы можете добавить все классы, которые вы хотите, в Div, а затем применить те, которые вы хотите использовать в конкретном использовании Div с помощью ключевого слова className .

Ответ №2:

С помощью styled-components вы можете использовать аналогичный формат.

Здесь мы создаем стилизованный компонент с именем Div , в стилизованном компоненте я объявил классы .search-input и .search-input.search-input-small стилизовал div из вашего примера.

Обрабатывается Div как родительский контейнер.

 const Div = styled.div`

display: flex;
background-color: black; 

.search-input {
background-color: blue;
}
.search-input.search-input-small {
color: white;

}
`;

Мы вызываем вновь созданный стилизованный компонент следующим образом:

 export default function App() {
  return (
      <Div>
      <div className="search-input search-input-small">Hello</div>
      </Div>
  
  );
}

Как вы можете видеть <div class="search-input search-input-small"> из вашего примера, он является дочерним по отношению к родительскому Div . Родительский Div не требует стилей, но я включил их для этого примера.

Также здесь есть codesandbox с рабочим примером.