Question

我正在使用样式化的组件来样式化我创建的嵌套<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;
`;

该组件可以正常工作，但这无法影响我需要定位的Input的内部填充。

我该怎么办？

Answer 1

根据您所说的，我建议填充The expected would look like this x y z sample x_1 y_1 z_1 <chr> <chr> <chr> <chr> <dbl> <dbl> <dbl> 1 50 100 50 a 10 10 10 2 25 50 25 b 5 5 5 3 10 25 10 c 2 2.5 2 4 5 10 5 nil 1 1 1组件的依赖性与您的Input（似乎已经意识到）有关。

因此，最好将“ unqiue”样式与Dropdown组件通过包装中的包装样式组件结合起来。

以下示例是粗糙的（绝不是完整的或无法正常工作的），但希望它能说明Dropdown的所有权应如何在padding-left内，而不是散布在某些地方的样式化组件其他在您的代码库中。

./ Input / Input.jsx

Dropdown

./ Dropdown / styled.js

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

./ Dropdown / Dropdown.jsx

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 */`;

此设置将促进可重复使用的import Input from '...'; import { InputWrapper, Icon, Menu } from './styled'; const Dropdown = ({ options }) => ( <div> <InputWrapper> <Icon /> <Input value={'bleh'} /> </InputWrapper> <Menu>{options}</Menu> </div> );组件。

Answer 2

找出以下解决方案：

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


<StyledInput>
  <Dropdown />
</StyledInput>

从外部的样式化嵌套的样式化组件

2 个答案: