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

عکس پروفایل نویسنده

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

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

 

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

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

 // In react

 

گسترش سبک ها

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

موضوع

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

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>