css components下載css components源代碼下載

@PHNTMS/CSS組件

一個簡單，輕巧且可自定義的CSS組件庫，可讓您將CSS樣式包裹在類似組件的結構中。受到CSS-In-JS庫的啟發，例如樣式組件和針跡。

介紹

CSS組件的核心是圍繞標準CSS的簡單包裝器。它允許您編寫您的CSS，然後將它們組合成準備在React中使用的組件。

這是具有可選變體的按鈕組件的最小示例：

 import { styled } from "@phntms/css-components" ;
import css from "./styles.module.css" ;

export const Button = styled ( "button" , {
  css : css . root ,
  variants : {
    primary : {
      true : css . primary ,
    } ,
  } ,
} ) ;

這將輸出一個可以在React中使用的不錯的干淨組件：

 import { Button } from "./Button" ;

export const App = ( ) => (
  < div >
    < Button > Default </ Button >
    < Button primary > Primary </ Button >
  </ div >
) ;

安裝

使用npm安裝此軟件包。

npm i @phntms/css-components

用法

這是一個按鈕組件的完整示例，該按鈕組件具有可選變體，稱為primary ：

組件/按鈕/styles.module.css

. root {
  background-color : grey;
  border-radius : 4 px ;
}

. primary {
  background-color : black;
}

組件/按鈕/樣式

 import { styled } from "@phntms/css-components" ;
import css from "./styles.module.css" ;

export const StyledButton = styled ( "button" , {
  css : css . root ,
  variants : {
    primary : {
      true : css . primary ,
    } ,
  } ,
} ) ;

組件/按鈕/index.tsx

 import { StyledButton } from "./styles.ts" ;

interface Props {
  title : string ;
  onClick : ( ) => void ;
  primary ?: boolean ;
}

export const Button = ( { title , onClick , primary } : Props ) => (
  < StyledButton onClick = { onClick } primary = { primary } >
    { title }
  </ StyledButton >
) ;

變體配置對象

變體配置對像是一個簡單的對象，允許您定義組件支持的變體。每個變體都是對像中的鍵，值是一個對象，該對象定義該變體的可能值（CSS類）。

 const StyledButton = styled ( "button" , {
  css : css . root ,
  variants : {
    big : {
      // Boolean values are supported
      true : css . big ,
    } ,
    color : {
      // String values are supported
      primary : css . primary ,
      secondary : css . secondary ,
    } ,
    size : {
      // Number values are supported
      1 : css . size1 ,
      2 : css . size2 ,
    } ,
  } ,
} ) ;

默認變體

您可以使用defaultVariants功能來設置一個變體：

 const StyledButton = styled ( "button" , {
  css : css . root ,
  variants : {
    big : {
      // Boolean values are supported
      true : css . big ,
    } ,
  } ,
  defaultVariants : {
    big : true ,
  } ,
} ) ;

複合變體

對於更複雜的變體設置，您可以使用化合物變體參數來定義使用多個變體時應應用哪些樣式。

 const StyledButton = styled ( "button" , {
  css : css . root ,
  variants : {
    border : {
      true : css . bordered ,
    } ,
    color : {
      primary : css . primary ,
      secondary : css . secondary ,
    } ,
  } ,
  compoundVariants : [
    {
      border : true ,
      color : "primary" ,
      css : css . blueBorder ,
    } ,
    {
      border : true ,
      color : "secondary" ,
      css : css . greyBorder ,
    } ,
  ] ,
} ) ;

其他

一系列課程

無論何處指定CSS選擇器，都可以通過一系列課程來幫助組成和重複使用樣式。

 import { styled } from "@phntms/css-components" ;
import shared from "../sharedstyles.module.css" ;
import css from "./styles.module.css" ;

const Link = styled ( "a" , {
  css : [ shared . link , shared . fontNormal , css . root ] ,
  variants : {
    big : {
      true : [ css . big , shared . fontBold ] ,
    } ,
  } ,
} ) ;

其他組件

您還可以從其他生態系統中設計其他組件。只要組件具有className ，樣式就應該傳播。

示例擴展標準Next.js Link組件：

 import { styled } from "@phntms/css-components" ;
import NextLink from "next/link" ;
import css from "./styles.module.css" ;

const Link = styled ( NextLink , {
  css : css . link ,
  variants : {
    big : {
      true : css . big ,
    } ,
  } ,
} ) ;

通過

默認情況下，變體值最終不會傳播到它正在擴展的元素，並且專門用於造型當前組件。這是為了停止反應特定的運行時錯誤。如果您確實想將變體值傳遞給要擴展的元素，則可以使用passthrough選項。

在下面的示例中， readOnly是我們倆都想樣式的內在HTML屬性，但也繼續傳遞到DOM元素。

 import { styled } from "@phntms/css-components" ;
import css from "./styles.module.css" ;

const Input = styled ( "input" , {
  css : css . root ,
  variants : {
    readOnly : {
      true : css . disabledStyle ,
    } ,
  } ,
  passthrough : [ "readOnly" ] ,
} ) ;

類型助手

我們提供了一個助手，可讓您訪問所定義的變體的類型。

 import { VariantProps } from "@phntms/css-components" ;
import css from "./styles.module.css" ;

const Button = styled ( "button" , {
  css : css . baseButton ,
  variants : {
    primary : { true : css . primary } ,
  } ,
} ) ;

type ButtonVariants = VariantProps < typeof Button > ;
type PrimaryType = ButtonVariants [ "primary" ] ;

CLI工具（實驗）

我們提供了一個CLI工具，該工具允許您從CSS和SCSS文件中生成組件，以確認特定命名約定。這是高度實驗性的，並且可能會改變。

考慮此CSS文件：

 /* styles.module.css */
nav . topBar {
  background-color : # aaa ;
  padding : 32 px ;
}

nav . topBar_fixed_true {
  position : fixed;
  bottom : 0 ;
  left : 0 ;
  right : 0 ;
}

或使用SCSS（Sassy CSS）：

 // styles.module.scss
nav .topBar {
  background-color : #aaa ;
  padding : 32 px ;

  & _fixed_true {
    position : fixed ;
    bottom : 0 ;
    left : 0 ;
    right : 0 ;
  }
}

您可以使用以下命令從此文件中生成一個組件：

 # For CSS
npx @phntms/css-components --css styles.module.css

# For SCSS
npx @phntms/css-components --css styles.module.scss

# or if you have the package installed
npx css-components --css styles.module.css
npx css-components --css styles.module.scss

這將輸出一個稱為styles.ts的文件，該文件看起來像這樣：

 import { styled } from "@phntms/css-components" ;

import css from "./test.css" ;

export const TopBar = styled ( "nav" , {
  css : css . topBar ,
  variants : {
    fixed : {
      true : css . topBar_fixed_true ,
    } ,
  } ,
} ) ;

可能的CSS定義：

a.link允許您為組件定義基本樣式。這意味著它將是具有CSS類link的錨標籤。
a.link_big_true允許您為一個稱為big變體設置樣式，並具有true 。
a.link_theme_light_default與上述相同，但也將變體設置為默認值。
a.link_big_true_theme_light使您能夠定義復合變體樣式。

CLI選項

--css您要從中生成組件的CSS或SCSS文件的路徑。這也可能是遞歸的地球模式，使您可以掃描整個組件目錄。
--output輸出文件的文件名。默認為styles.ts ，將保存在與CSS文件相同的目錄中。
--overwrite如果輸出文件已經存在，則將覆蓋它。默認為false 。

示例是從組件目錄中的所有CSS和SCSS文件中生成組件：

 # From CSS
npx @phntms/css-components --css ./src/components/ ** / * .css --output styles.ts

# Or from SCSS
npx @phntms/css-components --css ./src/components/ ** / * .scss --output styles.ts

# Or from both CSS and SCSS
npx @phntms/css-components --css ./src/components/ ** / * .{css,scss} --output styles.ts