如何使用樣式組件改變組件上的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模塊

來源

2017-09-05 Tyler L

內請請參閱文檔和指南：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樣式表，以您需要的方式對第三方組件進行樣式設置，並且它應該可以正常工作

來源

2017-09-05 07:57:17

如何使用樣式組件改變組件上的CSS

回答

相關問題