docs: update

zhangfisher · May 30, 2024 · 1c0fbea · 1c0fbea
1 parent c52e009
commit 1c0fbea
Show file tree

Hide file tree

Showing 16 changed files with 56 additions and 48 deletions.
diff --git a/docs/api.md b/docs/api.md
@@ -27,14 +27,14 @@ function styled<Props=any,Styles extends CSSRuleObject<Props> = CSSRuleObject<Pr
 ### StyledObject
 
 ```ts
-interface StyledObject<Styles extends CSSRuleObject =  CSSRuleObject  >{
+interface StyledObject<Styles extends CSSRuleObject =  CSSRuleObject>{
     // 生成的css字符串
     css           : string
     id            : string
     className     : string    
     vars          : CSSVars<Styles>                 
     computedStyles: ComputedStyles
-    getStyle      : (css?:CSSRuleObject,props?:any)=>CSSProperties
+    getStyle      : (props?:any,css?:CSSRuleObject)=>CSSProperties
     getProps      : (params?:{style?:CSSRuleObject,props?:any,className?:string})=>StyledResult
 }
 

diff --git a/docs/best-practices.md b/docs/best-practices.md
@@ -19,13 +19,13 @@ import { styled } from 'flexstyled'
 
 const StyledButton:React:FC = (props)=>{ 
     const btnStyle = styled({....})    
-    return <button className={btnStyle.className} style={btnStyle.getStyle({},props)} />
+    return <button className={btnStyle.className} style={btnStyle.getStyle(props)} />
 }
 
 // 或者
 const StyledButton:React:FC = (props)=>{ 
     const btnStyle = useStyled({....})    
-    return <button className={btnStyle.className} style={btnStyle.getStyle({},props)} />
+    return <button className={btnStyle.className} style={btnStyle.getStyle(props)} />
 }
 ```
 
@@ -44,7 +44,7 @@ import { styled } from 'flexstyled'
 const btnStyle = styled({....})    
 
 const StyledButton:React:FC = (props)=>{ 
-    return <button className={btnStyle.className} style={btnStyle.getStyle({},props)} />
+    return <button className={btnStyle.className} style={btnStyle.getStyle(props)} />
 }
 
 ```
@@ -60,7 +60,7 @@ import { styled } from 'flexstyled'
 
 
 const StyledButton:React:FC = styled((props,{className,getStyle})=>{ 
-    return <button className={className} style={getStyle({},props)} />
+    return <button className={className} style={getStyle(props)} />
 },{
     // css
 })

diff --git a/docs/changelog.md b/docs/changelog.md
@@ -1,5 +1,11 @@
 # flexstyled
 
+## 2.1.0
+
+### Minor Changes
+
+- 902f597: [特性] 调整`getStyle`方法的传参方式，从`getStyle(style,props)`调整为`getStyle(props,style)`。注意：此处为不兼容的更新
+
 ## 2.0.9
 
 ### Patch Changes

diff --git a/docs/guide/combind.md b/docs/guide/combind.md
@@ -46,9 +46,10 @@ const btnStyle = styled({
 ```
 
 如果是封装高阶组件，可以使用`styled`的简化方式：
+
 ```tsx
 const Button = styled((props,({className,getStyle}))=>{
-    return <button className={className} style={getStyle({props})} />
+    return <button className={className} style={getStyle(props)} />
 },{
     borderRadius: 4,
     padding: 10,
@@ -60,11 +61,11 @@ const Button = styled((props,({className,getStyle}))=>{
 
 ## 第3步：使用组件
 
+
 ```tsx
 const Button = (props)=>{
-    return <button className={btnStyle.className} style={btnStyle.getStyle({props})} />
+    return <button className={btnStyle.className} style={btnStyle.getStyle(props)} />
 }
-
 ```
 
 ## 小结

diff --git a/docs/guide/createStyle.md b/docs/guide/createStyle.md
@@ -10,7 +10,7 @@ type StyledObject ={
     className     : string    
     vars          : Vars    
     computedStyles: ComputedStyles
-    getStyle      : (css?:CSSRuleObject,props?:any)=>CSSProperties
+    getStyle      : (props?:any,style?:CSSRuleObject)=>CSSProperties
     getProps      : (params?:{style?:CSSRuleObject,props?:any,className?:string})=>StyledResult   
     css           :  string           // 生成的css字符串
 }
@@ -44,11 +44,13 @@ const StyledButton:React:FC = (props)=>{
     // 没使用到动态样式和CSS变量时
     return <button className={btnStyle.className} /> 
     // 用到动态样式时需要传入
-    return <button className={btnStyle.className} style={btnStyle.getStyle({props})} /> 
+    return <button className={btnStyle.className} style={btnStyle.getStyle(props)} /> 
     // 用到动态样式时或传入CSS变量
-    return <button className={btnStyle.className} style={btnStyle.getStyle({style:{
-        "--my-color":'blue'
-    },props})} /> 
+    return <button className={btnStyle.className} 
+        style={btnStyle.getStyle(props,{
+                "--my-color":'blue'
+            })}
+        /> 
 }
 
 ```

diff --git a/docs/guide/css-vars.md b/docs/guide/css-vars.md
@@ -11,10 +11,12 @@ interface CardProps{
 const Card = styled<CardProps>((props,{className,getStyle})=>{
     const { title,children,footer} =props
     return (
-      <div className={className} style={getStyle({  
-            "--padding":props.padding   //   [!code ++]   // 重载css变量
-            color:'red'                 //  [!code ++]    // 额外的内联样式
-          }                             //   [!code ++]
+      <div className={className} style={getStyle({
+          // 这里可以传递一些额外的参数给动态样式
+        },{  
+              "--padding":props.padding   //   [!code ++]   // 重载css变量
+              color:'red'                 //  [!code ++]    // 额外的内联样式
+            }                             //   [!code ++]
         )}>  
         <div className="header">  {title} </div>
         <div className="body">{children}</div>

diff --git a/docs/guide/dynamic.md b/docs/guide/dynamic.md
@@ -33,8 +33,8 @@ interface StyledButtonProps {
     radius?: number
 }
 const StyledButton:React:FC = (props)=>{ 
-    // 需要传入style={btnStyle.getStyle({props})}
-    return <button className={btnStyle.className} style={btnStyle.getStyle({props})} />
+    // 需要传入style={btnStyle.getStyle(props)}
+    return <button className={btnStyle.className} style={btnStyle.getStyle(props)} />
 }
 
 ```
@@ -61,7 +61,7 @@ const btnStyled= styled({
 例如`color:(props)=>props.color`会生成一个`css变量：--p-1n6vdw`。
 2. 将样式属性值替换为：`{color:'var(--p-1n6vdw)'}`,并且配置CSS变量的值为`--p-1n6vdw:unset`,将原始的样式值函数保存到一个内部字典`computedStyles`中,如`{--p-1n6vdw:(props)=>props.color}`
 3. 然后`styled`函数将样式插入到`head`标签中。
-4. 接下来需要在组件根元素中上使用`getStyle({props})`方法来注入动态样式。`getStyle`方法会遍历`computedStyles`字典，分别执行样式函数，将返回结果作为内联样式注入到组件根元素中。
+4. 接下来需要在组件根元素中上使用`getStyle(props)`方法来注入动态样式。`getStyle`方法会遍历`computedStyles`字典，分别执行样式函数，将返回结果作为内联样式注入到组件根元素中。
 5. 所以最终根元素中的内联样式就包括了CSS变量，形如`<div style="--p-1n6vdw:red"/>`
 
 
diff --git a/docs/guide/keyframes.md b/docs/guide/keyframes.md
@@ -35,7 +35,7 @@ const frames = keyframes("mymove",{
 
 const Button = styled((props,{getStyle})=>{
     // 由于keyframes用到了动态样式，所以需要传入getStyle({props})
-    return <button style={getStyle({props})} />  [!code ++]  // 注入样式 
+    return <button style={getStyle(props)} />  [!code ++]  // 注入样式 
 },{
   animation: `${frames} 2s linear`  // 声明动画
 },[

diff --git a/docs/guide/styledObject.md b/docs/guide/styledObject.md
@@ -8,8 +8,8 @@ type StyledObject ={
     id  : string
     vars     : Record<string,string | number>     
     computedStyles:ComputedStyles
-    getStyle : (css?:CSSRuleObject,props?:any)=>CSSProperties
-    getProps    : (params?:{style?:CSSRuleObject,props?:any,className?:string})=>StyledResult
+    getStyle : (props?:any,style?:CSSRuleObject)=>CSSProperties
+    getProps    : (params?:{css?:CSSRuleObject,props?:any,className?:string})=>StyledResult
 }
 ```
 
@@ -63,7 +63,7 @@ myStyle.computedStyles =={
 `getStyle`函数用于返回一个`StyledObject`样式对象。其函数签名如下：
 
 ```ts
-getStyle(css?:CSSRuleObject,props?:any):CSSProperties
+getStyle(props?:any,style?:CSSRuleObject):CSSProperties
 ```
 
 - 当样式声明中包含`动态样式`或`CSS变量`才需要使用`getStyle`函数，其返回值是一个`CSSProperties`对象，用来传递给组件的根元素`style`属性，如果没有样式中不包括`动态样式`或`CSS变量`，则可以不必传递。
@@ -98,7 +98,7 @@ const StyledButton = styled<StyledButtonProps>((props,{getProps})=>{
 const myStyle = styled({...})
 
 const StyledButton = (props)=>{ 
-    return <button  {...myStyle.getProps({stype:{<样式或CSS变量>},props,className:"额外的样式类"})} />
+    return <button  {...myStyle.getProps({css:{<样式或CSS变量>},props,className:"额外的样式类"})} />
 },{...})
 
 

diff --git a/docs/guide/useStyled.md b/docs/guide/useStyled.md
@@ -28,10 +28,7 @@ export const Card:React.FC<React.PropsWithChildren<CardProps>> = (props:CardProp
       }
     )
     return (
-      <div className={className} style={getStyle({
-          style:{"--title-color":titleColor},
-          props
-        )}>
+      <div className={className} style={getStyle(props,{"--title-color":titleColor})}>
         <div className="title">            
             <span>{title}</span>
             <span className="tools"><button onClick={()=>setTitleColor(getRandColor())}>Change</button></span>
@@ -48,7 +45,7 @@ export const Card:React.FC<React.PropsWithChildren<CardProps>> = (props:CardProp
 **说明：**
 
 - `useStyled`钩子返回`className`和`getStyle`,用来注入样式类名和动态样式。
-- `getStyle`函数支持传入更新`css`变量。如果使用到`props`动态样式，则需要传入`props`参数。
+- `getStyle`函数支持传入更新`css`变量或内联样式。如果使用到`props`动态样式，则需要传入`props`参数。
 - `useStyled`钩子支持传入`options`参数来配置`id`和`className`。
 - `useStyled`与`styled`函数功能一样，**唯一的区别是`useStyled`在`head`注入的样式表在组件卸载时会自动移除。** 
 

diff --git a/docs/guide/wrapperComponent.md b/docs/guide/wrapperComponent.md
@@ -11,13 +11,13 @@ interface StyledButtonProps {
 }
 const StyledButton = styled<StyledButtonProps>((props,{className,getStyle})=>{ 
      // 没使用到动态样式和CSS变量时
-    return <button className={btnStyle.className}} />  //   [!code ++]
+    return <button className={btnStyle.className} />  //   [!code ++]
     // 用到动态样式时需要传入
-    return <button className={btnStyle.className} style={btnStyle.getStyle({props})} /> //   [!code ++]
+    return <button className={btnStyle.className} style={btnStyle.getStyle(props)} /> //   [!code ++]
     // 用到动态样式时或传入CSS变量
-    return <button className={btnStyle.className} style={btnStyle.getStyle({style:{  //   [!code ++]
+    return <button className={btnStyle.className} style={btnStyle.getStyle(props,{  //   [!code ++]
         "--my-color":'blue'                                                             //   [!code ++]
-    },props})} /> //   [!code ++]
+    })} /> //   [!code ++]
 },{
     display        : 'inline-block',
     padding        : '0 10px',

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -29,7 +29,7 @@ const MyBtn = styled.button({
     "&:hover":{
       border: "1px solid red",
     }
-},[Fit,Block])
+},[Block])
 
 
 
@@ -65,7 +65,7 @@ function App() {
 
       </Card>
 
-     <button onClick={()=>setShowCard2(!showCard2)} >{showCard2 ? 'Hide Card' : 'Show Card'}</button>
+  <button onClick={()=>setShowCard2(!showCard2)} >{showCard2 ? 'Hide Card' : 'Show Card'}</button>
 
       { showCard2 && <Card2 title="Card2 - useStyle" footer="Copyright 2024" size={size} bgColor={bgColor}>
         Use useStyle in components to automatically destroy the style sheet when the component is hidden
@@ -102,7 +102,7 @@ function App() {
         <button onClick={()=>setBgColor("red")}>red</button>
         <button onClick={()=>setBgColor("yellow")}>yellow</button>
         <button onClick={()=>setBgColor("gray")}>gray</button>       
-      </Card4> 
+      </Card4>
     </div>
   )
 }

diff --git a/example/src/Card.tsx b/example/src/Card.tsx
@@ -8,7 +8,7 @@ export const Card = styled<CardProps>((props,{className,getStyle})=>{
     const [titleColor,setTitleColor] = useState("blue")
 
     return (
-      <div className={className} style={getStyle({"--title-color":titleColor})}>
+      <div className={className} style={getStyle({},{"--title-color":titleColor})}>
         <div className="title">            
             <span>{title}</span>
             <span className="tools"><button onClick={()=>setTitleColor(getRandColor())}>Change</button></span>

diff --git a/example/src/Card2.tsx b/example/src/Card2.tsx
@@ -9,7 +9,7 @@ export const Card2:React.FC<React.PropsWithChildren<CardProps>> = ((props:CardPr
     const [titleColor,setTitleColor] = useState("blue")
     const {className,getStyle} =  useStyled(cardStyle)
     return (
-      <div className={className} style={getStyle({"--title-color":titleColor},props)}>
+      <div className={className} style={getStyle(props,{"--title-color":titleColor})}>
         <div className="title">            
             <span>{title}</span>
             <span className="tools"><button onClick={()=>setTitleColor(getRandColor())}>Change</button></span>

diff --git a/src/styled.ts b/src/styled.ts
@@ -40,7 +40,7 @@
  * 
  */
 
-import { CSSRuleObject, ComponentStyledObject, StyledComponent, StyledObject, StyledOptions, CSSVars } from './types';
+import { CSSRuleObject, ComponentStyledObject, StyledComponent, StyledObject, StyledOptions, CSSVars, IStyledObject } from './types';
 import { parseObjectStyles } from "./parse"
 import { getComputedStyles, insertStylesheet, isPlainObject, isStyledObject, joinClassNames } from "./utils"
 import type { CSSProperties,ReactElement } from "react" 
@@ -99,11 +99,11 @@ export function createStyled<Props=any,Styles extends CSSRuleObject<Props> = CSS
     // 3. 创建样式对象
     const createStyledObject = (fcProps?:any) =>{
         const computedStyles = [...combindStyledObjects.map(s=>isStyledObject(s) ? (s as StyledObject).computedStyles : {}), style.computedStyles]
-        const getStyle =fcProps ?  (css?:CSSRuleObject)=>{
-                return Object.assign({},getComputedStyles(computedStyles,fcProps,combindVars),css) as CSSProperties
+        const getStyle :IStyledObject['getStyle']  = fcProps ?  (props,style)=>{
+                return Object.assign({},getComputedStyles(computedStyles,Object.assign({},fcProps,props),combindVars),style) as CSSProperties
             } :
-            (css?:CSSRuleObject,props?:any)=>{
-                return Object.assign({},getComputedStyles(computedStyles,props,combindVars),css) as CSSProperties
+            (props,style)=>{   
+                return Object.assign({},getComputedStyles(computedStyles,props,combindVars),style) as CSSProperties
             }
 
         // 连接类名，使得合并进来的样式类可以应用到当前组件
@@ -121,7 +121,7 @@ export function createStyled<Props=any,Styles extends CSSRuleObject<Props> = CSS
             getProps:(params) =>{
                 return {
                     className: joinClassNames(params?.className,className),
-                    style    : getStyle(params?.style,fcProps ? fcProps : params?.props)
+                    style    : getStyle(fcProps ? fcProps : params?.props,params?.style)
                 }
             }
         } as StyledObject<CSSVars<typeof combindVars>>            

diff --git a/src/types.ts b/src/types.ts
@@ -21,7 +21,7 @@ export interface IStyledObject<Styles extends CSSRuleObject =  CSSRuleObject> {
     className     : string    
     vars          : CSSVars<Styles>
     computedStyles: ComputedStyles
-    getStyle      : (css?:CSSRuleObject,props?:any)=>CSSProperties
+    getStyle      : (props?:any,style?:CSSRuleObject)=>CSSProperties
     getProps      : (params?:{style?:CSSRuleObject,props?:any,className?:string})=>StyledResult;
 
 }
@@ -30,7 +30,7 @@ export type StyledObject<Styles extends CSSRuleObject =  CSSRuleObject >= IStyle
 
 // 传递给组件时，不需要额外传递props，并且getStyle的签名也需要做相应调整
 export type ComponentStyledObject = Omit<StyledObject,'props' | 'getStyle'> & {
-    getStyle : (css?:CSSRuleObject)=>CSSProperties
+    getStyle : (props?:any,style?:CSSRuleObject)=>CSSProperties
     getProps :(params?:{style?:CSSRuleObject,className?:string})=>StyledResult
 }