您现在的位置是：课程教程文章

CSS中in JS是什么意思

2023-12-13 23:45课程教程文章人已围观

课程介绍: 1、 CSS中in JS是什么意思课程推荐; 2、 CSS中in JS是什么意思课程专题

说明

1、CSS中in JS，意思就是使用js语言写css，完全不需要些单独的css文件，所有的css代码全部放在组件内部，以实现css的模块化。

2、CSS in JS其实是一种编写思想。

目前已经有超过40多种方案的实现，最出名的是 styled-components。

实例

importReactfrom"react";
importstyledfrom"styled-components";

//创建一个带样式的h1标签
constTitle=styled.h1`
font-size:1.5em;
text-align:center;
color:palevioletred;
`;

//创建一个带样式的section标签
constWrapper=styled.section`
padding:4em;
background:papayawhip;
`;

//通过属性动态定义样式
constButton=styled.button`
background:${props=>(props.primary?"palevioletred":"white")};
color:${props=>(props.primary?"white":"palevioletred")};

font-size:1em;
margin:1em;
padding:0.25em1em;
border:2pxsolidpalevioletred;
border-radius:3px;
`;

//样式复用
constTomatoButton=styled(Button)`
color:tomato;
border-color:tomato;
`;

<Wrapper>
<Title>HelloWorld,thisismyfirststyledcomponent!</Title>
<Buttonprimary>Primary</Button>
</Wrapper>;

以上就是CSS中in JS的意思，希望对大家有所帮助。更多css学习指路：css教程

本文教程操作环境：windows7系统、css3版，DELL G3电脑。

课程教程：CSS中in JS是什么意思