关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

CSS中in JS是什么意思(html css js的作用是什么)

发布时间:2022-07-02 07:52:06

  说明

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

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

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

实例

[code]import React from "react";
import styled from "styled-components";
 
// 创建一个带样式的 h1 标签
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;
 
// 创建一个带样式的 section 标签
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;
 
// 通过属性动态定义样式
const Button = styled.button`
  background: ${props => (props.primary ? "palevioletred" : "white")};
  color: ${props => (props.primary ? "white" : "palevioletred")};
 
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;
 
// 样式复用
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;
 
‹Wrapper>
  ‹Title>Hello World, this is my first styled component!‹/Title>
  ‹Button primary>Primary‹/Button>
‹/Wrapper>;[/code]




相关推荐

【2022年的云计算虚拟化市场现状和发展(云计算未来市场) >>点击查看详情<<

【习近平向“全球发展:共同使命与行动价值”智库媒体高端论坛致贺信 >>点击查看详情<<

/template/Home/Redyun/PC/Static