我学到的 5 个基本的样式组件技能

Posted on 2022-05-31

fml85blm9dkc5atugm5d.jpg

这是我使用样式组件的备忘录。

  1. 基本语法

  2. 使用道具

  3. 使用自定义组件

  4. 创建可重用变量

  5. 创建可重用的 CSS 片段

基本语法

import styled from " styled-components " const StyleContainer = styled . cssSelector ` // your styles `

这是设置按钮样式的示例。

 const BaseButton = styled . button ` padding: 10px; background-color: #333; color: white; border-radius: 20px; border: none; cursor: pointer; ` ;

使用道具

由于这是 JS，因此您可以传递道具。

这是利用此功能共享相同样式但根据页码更改背景颜色的示例。

 export const PageContainer = styled . div ` min-height: 100vh; background-color: ${( props ) => props . color } ; color: white; padding: 10px; ` ;

将此组件与颜色道具一起使用。

 import { PageContainer } from " ./Page.style " const Page2 = () => { return ( < PageContainer color = " #5bb381 " > < h1 > Page2 < /h1 > < /PageContainer > ); }; export default Page2 ;

使用自定义组件

您可以设置其他组件以及 css 选择器的样式。

此代码片段使用来自 react-router-dom 的链接。

 const LogoContainer = styled ( Link ) ` text-decoration: none; ${ linkStyle } ` ;

稍后我会告诉有线语法 ${linkStyle}。

您可以使用其他样式组件来扩展样式。

 const BaseButton = styled . button ` padding: 10px; background-color: #333; color: white; border-radius: 20px; border: none; cursor: pointer; ` ; const SecondaryButton = styled ( BaseButton ) ` background-color: white; border: 1px #333 solid; color: #333; ` ;

创建可重用变量

我们可以将 JS 变量作为 css 变量。基本语法是创建 JS 变量并在使用时用 ${} 将其包装起来。

 const blue = " blue " ; const LinkContainer = styled ( Link ) ` ${ linkStyle } &:hover { color: ${ blue } ; } ` ;

创建可重用的 CSS 片段

您可以在 scss 中创建类似于 @maxin 的 css 片段。

 const black = " black " ; const linkStyle = css ` color: ${ black } ; cursor: pointer; ` ; const LogoContainer = styled ( Link ) ` text-decoration: none; ${ linkStyle } ` ;

整个代码可在此处获得。

样式化组件

原文在这里

原文： https://dev.to/lada496/5-basic-styled-components-skills-ive-learned-1n46