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