如何使用 styled-components 更改组件上的 css

Question

我的样板带有 styled-components 模块。这是另一个组件：

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

我只想给这个东西加上css，但是我不能。所以我想我会学习做这件事的反应方式......但是在google 2天之后我仍然不知道如何设置它的样式，并且默认情况下输入框实际上是不可见的。如何使用 styled-components 修改我的 npm 模块文件夹中的组件（在本例中为 Google-Places-Autocomplete）？

className 无效
我不知道是否有可能为的输入指定属性，如果它被埋在组件中，在 npm 模块中

Answer 1

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

styled-components 使用与老式 CSS 不同的方法来设置组件样式。取自 React，styled-components 专注于样式化封装元素而不是整个页面（理想情况下，您的样式化组件不应该知道它所在的 parent/context 并受其影响）。

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

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 样式表，以您需要的方式设置第三方组件的样式，它应该可以正常工作

如何使用 styled-components 更改组件上的 css

How to change the css on a component using styled-components

styled-components