FlexStyled is a simple runtime css-in-js
library for react component
pnpm add FlexStyled
# or
npm install FlexStyled
# or
yarn add FlexStyled
We plan to develop a Card
component, which has a title
attribute for displaying titles, a footer
' attribute for displaying bottom content, and a children
attribute as the content area of the card.
import { styled } from "FlexStyled"
export type CardProps = React.PropsWithChildren<{
title:string
footer?:string
}>
export const Card = styled<CardProps>((props,{className})=>{
const { title,children,footer} =props
return (
<div className={className}>
<div className="title">
{title}
</div>
<div className="content">{children}</div>
<div className="footer">{footer}</div>
</div>
)
},{
position:"relative",
width:"100%",
border:"1px solid #ccc",
borderRadius:"4px"
})
-The above code will create a Card
component, generate a style class (with a randomly generated name) for the style, and insert it into the head
tag.
-Then pass the className
prop to the component, which will use this class name to apply the style.
You can find a CSS style similar to this in the head
, where the className
and style.id
are both automatically generated. You can also specify styleId
and className
through the options
parameter.
<style id="6rxqfu">
.sw6y3s4{
position:relative;
width:100%;
border:1px solid #ccc;
border-radius:4px;
}
</style>
Next, let's add styles to the title
and footer
of the Card
component
export const Card = styled<CardProps>((props,{className})=>{
const { title,children,footer} =props
return (
<div className={className}>
<div className="title">
{title}
</div>
<div className="content">{children}</div>
<div className="footer">{footer}</div>
</div>
)},{
position:"relative",
width:"100%",
border:"1px solid #ccc",
borderRadius:"4px",
"& > .title":{
fontSize:"20px",
fontWeight:"bold",
},
"& > .footer":{
borderTop:"1px solid #ccc",
padding:"8px",
textAlign:"right"
}
})
-We have added styles to the title
and footer
above.
-Use the &
symbol to represent the current parent element, similar to the syntax of nested CSS such as less
and sass
.
The style generated in head
is as follows:
<style id="6rxqfu">
.sw6y3s4{
position:relative;
width:100%;
border:1px solid #ccc;
border-radius:4px;
}
.sw6y3s4 > .title{
font-size:20px;
font-weight:bold;
}
.sw6y3s4 > .footer{
border-top:1px solid #ccc;
padding:8px;
text-align:right;
}
</style>
FlexStyled
supports using props
to dynamically set styles.
For example, we want the background color of the content
card to be specified by the props.bgColor
attribute.
export const Card = styled<CardProps>((props,{className,getStyle})=>{
const { title,children,footer} =props
return (
<div className={className} style={getStyle()}>
<div className="title">
{title}
</div>
<div className="content">{children}</div>
<div className="footer">{footer}</div>
</div>
)},{
position:"relative",
width:"100%",
border:"1px solid #ccc",
borderRadius:"4px",
"& > .title":{
fontSize:"20px",
fontWeight:"bold",
},
"& > .footer":{
borderTop:"1px solid #ccc",
padding:"8px",
textAlign:"right"
},
"& > .content":{
padding:"8px",
backgroundColor:(props)=>props.bgColor
}
})
props.bgColor
to dynamically set the background color of the content
card.getStyle
function to get the dynamic style and inject it into the root element of the component.getStyle
function returns a css
style object that can be passed directly to the style
attribute.css
property can use (props)=>{....}
to dynamically generate CSS property values.FlexStyled
supports using css
variables.
We can use css
variables in the root style declaration, and then use the setVar
function to dynamically modify the css
variable in the component.
export const Card = styled<CardProps>((props,{className,getStyle})=>{
const { title,children,footer} =props
const [primaryColor,setPrimaryColor] = React.useState("blue")
return (
<div className={className} style={getStyle({"--primary-color":primaryColor})}>
</div>
<div className="content">{children}</div>
<div className="footer">{footer}</div>
</div>
)},{
position:"relative",
width:"100%",
border:"1px solid #ccc",
borderRadius:"4px",
"--primary-color":"blue",
"& > .title":{
fontSize:"20px",
fontWeight:"bold",
color:"var(--primary-color)"
},
"& > .footer":{
borderTop:"1px solid #ccc",
padding:"8px",
textAlign:"right"
},
"& > .content":{
padding:"8px",
backgroundColor:(props)=>props.bgColor
}
})
css
variables.--primary-color
css
variable in the root style.--primary-color
variable in the title
style.css
variable, we need to introduce ref
and pass ref
to the root element, and then use the setVar
function to modify the css
variable.FlexStyled
is a very simple css-in-js
library that can help you quickly encapsulate react
components and support css
variables and dynamic css
properties.
className
in the component.css
variables, you need to introduce ref
, pass ref
to the root element, and then use the setVar
function to modify css
variables.props
dynamic css
properties, you need to use the getStyle
function to get the dynamic css style and inject it into the root element.styled
function can also be used to create styles only and insert into head.
// card.style.ts
import { styled } from "FlexStyled"
// create style and insert into head
export default styled({ // 组件样式
position:"relative",
width:"100%",
border:"1px solid #ccc",
borderRadius:"4px",
"--primary-color":"blue",
"& > .title":{
fontSize:"20px",
fontWeight:"bold",
color:"var(--primary-color)"
},
"& > .footer":{
borderTop:"1px solid #ccc",
padding:"8px",
textAlign:"right"
},
"& > .content":{
padding:"8px",
backgroundColor:(props)=>props.bgColor
}
})
// card.tsx
import cardStyle from "./card.style"
export default (props:CardProps)=>{
return (
<div className={cardStyle.className} style={cardStyle.getStyle({"--title-color":titleColor},props)}>
<div className="title">
{props.title}
</div>
<div className="content">{props.children}</div>
<div className="footer">{props.footer}</div>
</div>
)
}
using createStyle.props
to simplify the parameter passing, as follows:
export default (props:CardProps)=>{
return (
<div {...cardStyle.props()}>
...
</div>
)
}
<div {...cardStyle.props({"--title-color":titleColor})}/>
<div {...cardStyle.props({"--title-color":titleColor},{props})}/>
<div {...cardStyle.props({"--title-color":titleColor},{props,className:"xxxxx xxxx"})}/>
FlexStyled
also provides a hook useStyled
to help you quickly encapsulate react
components.
import { useStyle } from "FlexStyled"
export const Card2:React.FC<React.PropsWithChildren<CardProps>> = ((props:CardProps)=>{
const { title } = props
const [titleColor,setTitleColor] = useState("blue")
const {className,getStyle } = useStyle({
// style
})
return (
<div className={className} style={getStyle({"--title-color":titleColor},props)}>
<div className="title">
<span>{title}</span>
<span className="tools"><button onClick={()=>setTitleColor(getRandColor())}>Change</button></span>
</div>
<div className="content">
{props.children}
</div>
<div className="footer">{props.footer}</div>
</div>
)
})
useStyle
hook returns className
and getStyle
, which are used to inject style class names and dynamic styles.getStyle
function returns a css
style object that can be passed directly to the style
attribute.useStyle
hook supports passing options
parameters to configure styleId
and className
.useStyle
hook is the same as the styled
function, the only difference is that the style
sheet injected into the head
will be automatically removed when the component is uninstalled.FlexStyled
supports creating styled components, use html tag name.
import { styled } from "FlexStyled"
const MyButton = styled.div({
color:"red",
"&:hover":{
color:"blue"
}
})
span
, button
, etc.Due to the limitations of css-in-js
, there may be performance issues. A recommended performance optimization method is to create all styles at once during the application's startup phase and insert them into the head
, and then reference the styles in the component.
// styles.tsx
import { styled } from "FlexStyled"
export style1 = styled({...})
export style2 = styled({...})
export style3 = styled({...})
// styled(<React.FC>,<styles>,<options>)
export interface StyledOptions{
// The ID of the style sheet, if not specified, will be automatically generated
styleId?:string
// The generated class name, if not specified, will be automatically generated
className?:string
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型