如何使用样式组件改变组件上的CSS

问题描述：

我的样板文件带有样式组件模块。这是另一个组件：如何使用样式组件改变组件上的CSS

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

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

的className不起作用
我不知道，如果它甚至有可能，如果它埋在组件中指定属性来了< PlacesAutocomplete>的输入，NPM模块

答

内请请参阅文档和指南：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样式表，以您需要的方式对第三方组件进行样式设置，并且它应该可以正常工作

如何使用样式组件改变组件上的CSS

相关推荐