首页 前端知识 style-components使用手册

style-components使用手册

2024-08-16 22:08:10 前端知识 前端哥 593 300 我要收藏

初识style-components

Styled-components 是一个用于在 React 中编写 CSS 的库,它允许你通过 JavaScript 将样式与组件结合起来,本质上还是组件化开发,将你定义的样式组件包裹在你需要修改样式的标签或文本上,样式组件将转换为一个实际的dom去包裹住你的标签或文本,从而起到修改样式的作用

1. 安装

首先,在你的项目中安装 Styled-components

npm install styled-components 
# 或
yarn add styled-components

2. 使用方式

2.1. 组件内使用不推荐
import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
  padding: 0.5em 1em;
  cursor: pointer;
`;

const App = () => (
  <Button>Click Me</Button>
);

export default App;
2.2. 组件外部使用推荐

定义一个.ts文件用于书写样式,并导出

import styled from 'styled-components'

export const LoginDiv = styled.div`
    margin: 100px auto;
    width: 500px;
    height: 400px;
    border: 1px solid;
    border-radius: 8px;
`

组件中导入外部样式使用

import React from 'react';
import { LoginDiv } from './index';

const Login = () => {

    return (
        <LoginDiv>
            <div>div</div>
        </LoginDiv>
    )
}
export default Login

基本用法

为了方便阅读,下面的案例全部采用了使用方式2.1 中的写法,但这种写法不建议在开发中使用,实际开发中建议使用 2.2 中推荐的写法

1. 简单使用

import styled from 'styled-components';

// 定义基本样式
// 注意:这里的styled.button,就是让页面渲染之后,将它变成一个button html标签
// 类比推理,你还可以指定其他的。例如styled.div、styled.span、styled.h1等
const Button = styled.button`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
  padding: 0.5em 1em;
  cursor: pointer;
`;

// 给样式增加hover效果
const Button = styled.button`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
  padding: 0.5em 1em;
  cursor: pointer;

  &:hover {
    background: darkviolet;
  }
`;

2. 使用嵌套样式

CSS 样式可以嵌套,就像在 SASS 中一样:

import styled from 'styled-components';

const Container = styled.div`
  padding: 2em;
  background: papayawhip;

  .title {
    color: palevioletred;
    font-size: 2em;
  }

  .content {
    color: darkslategray;
  }
`;

const App = () => (
  <Container>
    <div className="title">Title</div>
    <div cl
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15843.html
标签
评论
发布的文章

XML与JSON的使用

2024-08-23 21:08:27

npm i 常见问题

2024-08-23 20:08:23

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!