Стилизация вложенного стилевого компонента из внешнего - PullRequest
Новая
       8

Стилизация вложенного стилевого компонента из внешнего

0 голосов
/ 08 января 2019

Используя стилевые компоненты, я пытаюсь стилизовать вложенный <Input /> созданный мною компонент, который используется внутри другого компонента, в котором при наборе текста появляется раскрывающийся список. Мне нужно добавить padding-left: 3rem к этому вложенному входу, но я не могу получить к нему доступ из компонента <Dropdown />. 

<Dropdown
  options={options}
/>

Выше импортировано, где мне это нужно. Мне нужно получить доступ к приведенному ниже входу из выше <Dropdown />. 

<div>
  <Input {...props}/> // I need to edit the padding in this component
  // rendered input unique to this new component would go here
</div>

Вышеуказанный <Input /> импортируется из другого компонента, который используется во всех случаях, когда мне требуется ввод. 

export const Dropdown = styled(DropDown)`
  padding-left: 3rem !important;
`;

Компонент работает нормально, но это не влияет на внутреннее заполнение Входа, на которое мне нужно нацелиться.

Что мне делать?

Ответы [ 2 ]

0 голосов
/ 09 января 2019

Исходя из того, что вы сказали, я бы предположил, что зависимость заполнения компонента Input зависит от вашего Dropdown (что, похоже, вы уже поняли).

Поэтому вам будет лучше, если этот стиль "unqiue" будет связан с вашим компонентом Dropdown через обернутый в него компонент стиля.

Следующий пример является грубым (и никоим образом не завершенным или работающим), но, надеюсь, он иллюстрирует, как владелец padding-left должен находиться в пределах Dropdown, а не случайный компонент в стиле, плавающий где-то еще в вашем коде основа.

. / Вход / Input.jsx 

const Input = ({ value }) => (
  <input value={value} />
);

. / Выпадающее / styled.js 

const InputWrapper = styled.div`
  position: relative;
  padding-left: 3rem !important; /* Your padding */
`;

const Icon = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3rem;
  background: blue;
`;

const Menu = styled.ul`/* whatever */`;

. / Выпадающее / Dropdown.jsx 

import Input from '...';
import { InputWrapper, Icon, Menu } from './styled';
const Dropdown = ({ options }) => (
  <div>
    <InputWrapper>
      <Icon />
      <Input value={'bleh'} />
    </InputWrapper>
    <Menu>{options}</Menu>
  </div>
);

Эта установка будет продвигать повторно используемые self-contained компоненты.

0 голосов
/ 08 января 2019

Разобрался с решением ниже: 

export const StyledInput = styled.div`
  && #id-for-input { // specifically on the <Input />
    padding-left: 3rem !important;
  }
`;


<StyledInput>
  <Dropdown />
</StyledInput>
...