Question

我的样板附带样式组件模块。这是另一个组成部分：

return (
  <form onSubmit={this.handleFormSubmit}>
    <PlacesAutocomplete inputProps={inputProps} />
    <button type="submit">Submit</button>
  </form>
)

我只是想为这件事添加css，但我不能。所以我想我会学习这样做的反应方式......但是在谷歌2天后我仍然不知道如何设计这个样式，输入框默认是不可见的。如何在带有样式组件的npm模块文件夹中修改组件（在本例中为Google-Places-Autocomplete）？

className不起作用
我不知道是否甚至可以指定＆lt;的属性。 PlacesAutocomplete＆gt;的输入，如果它隐藏在组件内，在npm模块

Answer 1

请参阅文档和指南：https://www.styled-components.com/docs/basics

styled-components使用不同的方法来设置组件，而不是旧式CSS。从React获取，styled-components侧重于样式化封装元素而不是整个页面（理想情况下，您的样式组件永远不会知道并受其所在的父/上下文的影响。）

从实际角度来看，我希望这两页能够清楚地解释如何以简单的方式设置组件的样式（参见代码示例）：

https://www.styled-components.com/docs/basics#styling-any-components

https://www.styled-components.com/docs/faqs#can-i-nest-rules

虽然您可能无法始终在第三方组件上使用className，但您始终可以使用样式级联：

const MyAutoCompleteWrapper = styled.div`
    & > .google-places-autocomplete {
        font-size: 24px;
        color: rgb(255, 0, 0);
    }
`;

React.render(
  <MyAutoCompleteWrapper>
    <PlacesAutocomplete inputProps={inputProps} />
  </MyAutoCompleteWrapper>,
  document.querySelector('.app')
);

另外，记住使用styled-components并不会阻止您全局使用普通CSS，如果这是您的偏好，则可能会有用。您可能仍然只是附加一个单独的CSS样式表，以您需要的方式设置第三方组件的样式，它应该可以正常工作

如何使用样式化组件

1 个答案: