时间戳

首页 > 解决方案 > 是否可以从库中定位样式化组件的子组件？

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

问题描述

我正在使用<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;
  }
`

本质上是针对表单，然后是子按钮组件。

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

标签： javascriptcssreactjsstyled-components

解决方案

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

该styled方法也适用于您自己的所有组件或任何第三方组件，只要它们将className prop 传递给它们渲染的子组件，它们也应该传递它，依此类推。最终，className必须将该行向下传递到实际的 DOM 节点，以使样式生效。

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

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

假设 DOM 结构是这样的：

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

styled然后你可以在 styled-components 的方法中定位这个按钮，如下所示：

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

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

如果classNameprop 没有传递到您正在使用的库中的组件树中，则需要提供一个包装器组件：

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>

CodeSandbox 示例：https ://codesandbox.io/s/2w3owyjy2n

推荐阅读