如何使用樣式組件顯示一些值？

Question

我是樣式組件的新手，我有點困惑。 我們可以顯示一些東西或向 styled-compoentns 添加功能嗎？ 或者 styled-components 是我們只能應用 css 的組件

Answer 1

styled-components 主要用於應用 css。

所以通常你會使用提供內容的包裝器組件，並使用從 styled-components 獲得的組件進行裝飾。

有時，我發現當內容非常特定於組件時，使用.attrs構造函數傳遞children級很有用。

const ResourceMissingError= styled.div.attrs({
    children: 'This resource could not be found'
})`color: red`;

render(<ResourceMissingError />);

Answer 2

我們可以顯示一些東西或向樣式組件添加功能嗎？

是的，樣式化的組件可以像任何原生組件一樣使用。 因此，正如 HTML 的<button>可用於顯示某些內容一樣，您可以使用樣式按鈕來執行此操作。 見下文。

類似地，您可以像在原生組件中一樣添加功能，例如通過監聽點擊事件。 下面的演示通過處理其 click 事件，向ColorfulButton “添加” 功能。

另請參閱如何通過mycolor="green"將顏色作為道具傳遞給ColorfulButton ：

 const ColorfulButton = styled.button` display: inline-block; color: ${props => props.mycolor || "blue"}; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; display: block; `; class TodoApp extends React.Component { constructor(props) { super(props) this.state = { text: "Learn JavaScript (click me)", done: true } } handleClick = e => { this.setState({...this.state, done: .this.state;done}). } render() { return ( <div> <ColorfulButton onClick={this.handleClick} mycolor="green">{this.state.text}</ColorfulButton> <br /> {this.state?done: 'Yes'. 'No'} </div> ) } } ReactDOM,render(<TodoApp />. document.querySelector("#app"))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script> <div id="app"></div>

Answer 3

You can make a CSS file and import it in your different components like making class in CSS and use that class in your component as className="" . 此外，您可以像這樣引用內聯 CSS style={{}}確保像font-size這樣的屬性名稱將在 React 內聯 CSS 的fontSize中寫入。 每個 CSS 屬性名稱中間有一個破折號，破折號將被刪除，破折號后面的下一個字母將大寫，並且屬性值將在雙引號或單引號中。