Передать опору вложенному элементу в стилизованном компоненте

Я хотел бы передать опору вложенному стилю для элемента абзаца, но похоже, что я не могу поставить опору непосредственно на элемент. Как мне этого добиться? Я хочу применить преобразование верхнего регистра только к одному из элементов p ...

const MailingListWrapper = styled.div`
  display: flex;
  & > p {
    text-transform: ${props => props.uppercase || 'none'};
  }
`

function JoinUs() {
  return (
    <MailingListWrapper>
      <p uppercase = "uppercase">Join our mailing list!</p>
      <p>Never miss an update</p>
    </MailingListWrapper>
  )
}

css reactjs styled-components

27.10.2018 19:07

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

1 558

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

props, к которому у вас есть доступ в строке шаблона, используемой при создании компонента MailingListWrapper, - это реквизиты, предоставляемые MailingListWrapper, когда вы его используете.

Вместо этого вы можете присвоить тегу puppercaseclassName и просто применить стили к тегам p с помощью класса uppercase.

const MailingListWrapper = styled.div`
  display: flex;
  & > p.uppercase {
    text-transform: uppercase;
  }
`;

function JoinUs() {
  return (
    <MailingListWrapper>
      <p className = "uppercase">Join our mailing list!</p>
      <p>Never miss an update</p>
    </MailingListWrapper>
  );
}

В этом случае мне пришлось бы создать два стиля, по одному для каждого элемента p? Если я хочу, чтобы у них обоих был цвет: золотой, как мне этим поделиться? :)

— 27.10.2018 19:52

27.10.2018 19:14

Помещая здесь окончательный результат для потомков на основе ответа Толле ...

const MailingListWrapper = styled.div`
  display: flex;
  & > p {
    color: gold;
    &.uppercase {
      text-transform: uppercase;
    }
  }
`

27.10.2018 19:56

Другие вопросы по теме

Диспетчер TypeError.useState не является функцией при использовании React Hooks

Как сообщить веб-интерфейсу, что ваш сервер успешно получил токен доступа

Перенос нескольких маршрутов реагирующего маршрутизатора в границу ошибки

Поведение субъекта при подписке с выдачей старого и нового значения после отмены подписки

React refs: не удается прочитать свойство focus со значением null

В чем разница между установкой атрибута DOM напрямую и через requestAnimationFrame?

415 Медиа не поддерживается, вызывается конечная точка post REST

Использование response-router-dom с Spring Boot

Ref, созданный React.createRef (), имеет значение null для дочернего компонентаDidMount

Повторно использовать компонент React из реквизита рендеринга

Передать опору вложенному элементу в стилизованном компоненте

Ответы 2

Другие вопросы по теме

Похожие вопросы