Блог

Я уверен, что есть способ решить эту проблему, но я не могу его найти. У меня есть компонент react GenericList , который представляет собой список с функциями CRUD. У него есть своя Popup внутренняя сторона.

 <GenericList
  popupContent={(
    <CharterPeriodsPopup
      charter={charter}
    />
  )}
 

А вот код внутри GenericList

 <Popup
  bodyClassName={this.props.bodyClassName}
  contentClassName={this.props.contentClassName}
  title={title}
  {...this.props.popupProps}
>
  {!popupContent ? '$popupContent': (
           cloneElement(this.props.popupContent, {...popupProps}))}
</Popup>
 

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

Посмотрите на экран, который я загрузил.

Мне нужен доступ к всплывающему телу. С помощью SCSS мы можем просто задать имена классов и импортировать их в компонент react, и это будет работать. Но в случае со стилизованными компонентами у нас есть определенная область, которая относится только к стилизованной компонентной части. Я создал стилизованный компонент для CharterPeriodsPopup.

Из документов:

Интеграция существующего фреймворка CSS со стилизованными компонентами действительно проста! Вы можете использовать существующие имена классов вместе с вашими компонентами.

Например, представьте, что у вас есть существующее приложение с двумя классами, которые вы хотите использовать снова: .small и .big . Если вы хотите, чтобы класс всегда был прикреплен к компоненту, вам следует использовать метод attrs для его прикрепления. Если вы хотите прикрепить его только в некоторых случаях, вы можете использовать реквизит имени класса, как и всегда!

 // Using .attrs, we attach the .small class to every <Button />
const Button = styled.button.attrs(props => ({
  className: "small",
}))`
  background: black;
  color: white;
  cursor: pointer;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid black;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Styled Components</Button>
    {/* Here we attach the class .big to this specific instance of the Button */}
    <Button className="big">The new way to style components!</Button>
  </div>
);