是否可以从库中定位样式化组件的子组件？答案

【问题标题】：Is it possible to target a child component of styled component from a library?是否可以从库中定位样式化组件的子组件？
【发布时间】：2018-12-24 23:20:51
【问题描述】：

我正在使用来自组件库的<Form/> 组件。该表单有一个提交按钮的子组件。

const loginForm = [
  {
    label: "Username",
    required: true,
    type: "text"
  },
  {
    label: "Password",
    required: true,
    type: "password"
  }
]

<LoginForm
  width={{ xs: 12, md: 4 }} 
  autoComplete={false}
  buttonDisabled={buttonDisabled}
  buttonLabel="LOGIN"
  fields={loginForm}
  onChange={this.onChange}
  onSubmit={data => login({ variables: data })}
/>

生成这个 html：

我想为按钮设置样式。希望做这样的事情：

const LoginForm = styled(Form)`
  Button_StyledButton{
    outline: black solid 10px;
  }
`

主要针对表单，然后是子按钮组件。

这可以用样式化的组件来完成吗？

【问题讨论】：

请问您使用的是哪个组件库？
看看这个：stackoverflow.com/questions/48713421/…
不幸的是它不是公开的
@ArunYokesh 我确实看到了那个帖子，但这是一个不同的用例。他们将子组件作为子组件传递。这里的区别是我试图定位的按钮元素是由父表单组件生成的。
你试过写const LoginForm = styled(Form)` > Button_StyledButton ...吗？另外，Form 元素是否使用了给它的 className 属性？

标签： javascript css reactjs styled-components

【解决方案1】：

由于您使用的不是公共图书馆，请确保您的图书馆有利于您通过 className 道具。

styled 方法适用于您自己或任何人第三方组件也是如此，只要它们通过className prop 到他们渲染的子组件，它也应该通过它，并且很快。最终，className 必须向下传递给使样式生效的实际 DOM 节点。

如果满足此条件，您可以利用styled(LoginForm) 方法。

我不知道您的LoginForm 生成的 DOM 结构，但是您可以通过普通的 css 选择器有效地定位按钮。

假设 DOM 结构是这样的：

<form>
  <label>...</label>
  <input .../>
  <label>...</label>
  <input .../>
  <button>...</button>
</form>

然后你可以像这样在 styled-components 的 styled 方法中定位这个按钮：

const LoginForm = styled(Form)`
  button {
    outline: black solid 10px;
  }
`

选择器实际上取决于 DOM 结构，您需要根据需要对其进行调整。

如果className 属性没有在你正在使用的库中的组件树下传递，你需要提供一个包装器组件：

const Wrapper = styled.div`
  button {
    outline: black solid 10px;
  }
`
<Wrapper>
  <LoginForm
    width={{ xs: 12, md: 4 }} 
    autoComplete={false}
    buttonDisabled={buttonDisabled}
    buttonLabel="LOGIN"
    fields={loginForm}
    onChange={this.onChange}
    onSubmit={data => login({ variables: data })}
  />
</Wrapper>

代码沙盒示例：https://codesandbox.io/s/2w3owyjy2n

【讨论】：