https://virgool.ir/feed/@ilxanlarبرنامه‌نویس جاوااسکریپت و عاشق ری‌اکت، در حال حاضر در Today's Crypto کار میکنم!fa2026-11-11 18:16:09https://files.virgool.ir/upload/users/2248/avatar/RFGTw5.pnghttps://virgool.ir/@ilxanlarhttps://virgool.ir/JavaScript8/what-are-styled-components-jyxe2piklax6فرض کنید همه‌ی style های موردنیاز برای یک کامپوننت داخل خود آن تعریف شده باشد، به‌به!import React from 'react'; import ReactDOM from 'react-dom'; import styled from 'styled-components'; const Button = styled.button` background-color: #00BFFF; border: 1px solid transparent; color: #FFF; font-size: 16px; padding: 10px 15px; `; ReactDOM.render( <Button>Submit</Button>, document.getElementById('root') );توجه کنید که style باید داخل Template literals تعریف شود ` `دیگر نیازی نیست نگران className ها باشید، البته این بدین معنا نیست که نمی‌توانید از className استفاده کنید:<Button className="submit-button"> Submit </Button>مهم‌تر اینکه شما این style ها را با جاوااسکریپت می‌نویسید:import styled from 'styled-components'; const backgroundColor = '#00BFFF'; const Button = styled.button` background-color: ${backgroundColor}; border: 1px solid transparent; color: #FFF; font-size: 16px; padding: 10px 15px; `;وقتی حرف از کامپوننت می‌شود نام prop به میان می‌آید. در مثال بالا، backgroundColor می‌تواند یک function باشد که prop های کامپوننت Button را به عنوان پارامتر ورودی دریافت می‌کند:import PropTypes from 'prop-types'; import styled from 'styled-components'; function backgroundColor(props) { if (props.primary) { return '#00BFFF'; } else { return '#353535'; } } const Button = styled.button` background-color: ${backgroundColor}; border: 1px solid transparent; color: #FFF; font-size: 16px; padding: 10px 15px; `; Button.propTypes = { primary: PropTypes.bool }; ReactDOM.render( <div> <Button primary>Submit</Button> <Button>Cancel</Button> </div>, document.getElementById('root') );برای کامپوننت‌های تودرتو می‌توانید style های خود را مثل SCSS بنویسید:const Button = styled.button`...`; const Wrapper = styled.div` margin: auto 20px; max-width: 600px; ${Button} { display: inline-block; width: 100%; } `; ReactDOM.render( <Wrapper> <Button> Create my Account </Button> </Wrapper>, document.getElementById('root') );هم‌چنین می‌توانید styled-components را extend کنید:import React from 'react'; import styled from 'styled-components'; const DefaultButton = styled.button` background-color: #353535; border: 1px solid transparent; color: #FFF; font-size: 16px; padding: 10px 15px; `; const PrimaryButton = DefaultButton.extend` background-color: #00BFFF; `;بسیاری از ویژگی‌های styled-components ناگفته باقی ماند ولی در نوشته‌های بعدی درباره آنها صحبت خواهیم کرد.مهدی نامورمهدی نامورWed, 10 Jan 2018 01:00:21 +0330