مقدمه ای بر اجزای سبک شده | هکر ظهر

@رحولیسمرهول

Front-end Web Developer و Blogger

اجزای مدل شده یک است CSS-in-JS کتابخانه ای که به شما کمک می کند CSS را در یک جز write بنویسید. در اینجا در این پست ، من بیش از اصول لازم برای دانستن توضیح خواهم داد.

معرفی

شما می توانید CSS scoped بنویسید به این معنی که CSS فقط برای آن عنصر در م theلفه اعمال می شود ، بدون اینکه ریخته شود. هنوز می توانید بنویسید CSS جهانی.

چرا؟

• پیشوندهای فروشنده اتوماتیک
• نام کلاس های منحصر به فرد ، به این معنی است که هیچ کلاس نامی از اشکالات ندارد
• سبک های استفاده نشده را حذف می کند
• تطبیق بر اساس لوازم جانبی
• از SSR (Server Side Rendering) نیز پشتیبانی می کند

در حال نصب

شروع شدن

import styled from 'styled-components'; 

const Button = styled.button`
 font-size: 1.5rem;
 padding: 2em;
 `; 

 //in React

 Click Me!Button

دکمه – لوازم جانبی

const Button = styled.button`
   font-size: 1.5em; 
   padding: 2em;
   color: ${
    props = (props.primary ? 'blue' : 'black')
    };
 `; 

 // In react

 Click Me!Button

گسترش سبک ها

const Button = styled.button`
   font-size: 1.5em;
   padding: 2em;
 `; 

 // Extend the button

 const BlueButton - styled(Button)`
  color: blue;
 `;

برای استفاده مجدد از سبک ها

export const Button = styled.button`
   font-size: 1.5em; 
   padding: 2em;
 `;   

 // DEFINE & EXPORT, Re-use

موضوع

یک تم مجموعه ای از همه مواردی است که ما در یک برنامه مانند رنگ ، فاصله و غیره استفاده می کنیم. این تعریف …