styled-components,classnames,antd的使用

最新推荐文章于 2025-03-10 15:50:50 发布

litter_lj

最新推荐文章于 2025-03-10 15:50:50 发布

阅读量1.8k

点赞数 1

分类专栏： React全家桶文章标签： react

本文链接：https://blog.csdn.net/litter_lj/article/details/114580771

版权

React全家桶专栏收录该内容

6 篇文章

订阅专栏

本文介绍了styled-components的基本用法，包括属性传递、动态样式及与antd的结合使用，并展示了classnames库在解决复杂样式需求方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.styled-components的使用

import React, { Component } from "react";
import styled, { ThemeProvider } from "styled-components";
import styles from "./css/styled.module.css";  // 测试 css modules


// 基础用法 + 嵌套 + 伪类 + 伪元素
const ContentWrap = styled.div`
  padding: 10px;
  border: 1px solid #e0e0e0;
  margin: 10px 20px;
  .title {
    font-size: ${(props) => props.theme.fontSize};
    &:hover {
      color: #f00;
      font-weight: bold;
    }
    &::after {
      content: "";
      border: 1px solid #f00;
      width: 3px;
      height: 10px;
      display: inline-block;
    }
  }
`;

// 属性props的传递 + 自定义属性（静态）
const Base = styled.input.attrs({
  placeholder: "请输入内容",
  radius: "10px",
})`
  padding: 10px 15px;
  outline: none;
`;

// 继承 + 动态属性的传入
const SInput = styled(Base)`
  color: ${(props) => props.color};
  border-radius: ${(props) => props.radius};
`;

export class TStyled extends Component {
  state = {
    color: "green",
  };
  render() {
    const { color } = this.state;
    return (
      <ThemeProvider theme={{ fontSize: "32px" }}>
        <hr />
        <h2>styled-components</h2>
        {/* .的形式需要驼峰形式 */}
        <p className={styles.desc}>这是个测试css Modules的描述</p>
        <p className={styles["desc-line"]}></p>
        <p className={styles.descLine}></p>
        <ContentWrap>
          <p className="title">这是个内容</p>
          <SInput color={color} />
        </ContentWrap>
      </ThemeProvider>
    );
  }
}

export default TStyled;

2.classnames的使用

import React, { Component } from "react";
import classNames from "classnames";


// className的解决方案
export class TClassnames extends Component {
  state = {
    isActive: false,
    isBar: true,
  };

  render() {
    const { isActive, isBar } = this.state;
    return (
      <div>
        <hr />
        <h4>classnames的使用</h4>
        <p className={classNames("active", "foo", "bar")}>样式1</p>
        <p className={classNames({ active: isActive, bar: isBar }, "foo")}>
          样式2
        </p>
        <p
          className={classNames(
            { active: isActive, bar: isBar },
            "foo",
            null,
            undefined,
            0,
            10,
            1
          )}
        >
          样式3
        </p>
        <p className={classNames([{ active: isActive, bar: isBar }, "foo"])}>
          样式4
        </p>
      </div>
    );
  }
}

export default TClassnames;

3.antd的引入

import React, { Component } from "react";
import { Button } from "antd";  // antd的使用方式
import store from "./store";
import { countAction } from "./store/count";

export class TAntd extends Component {
  state = {
    count: store.getState().countInfo.count,
  };

  componentDidMount() {
    // 监听store的变化 进行通知 然后重新渲染页面
    this.unsubscribe = store.subscribe(() => {
      this.setState({
        count: store.getState().countInfo.count,
      });
    });
  }

  // 组件卸载要取消监听
  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    return (
      <div>
        <hr />
        <h4>antd的演练</h4>
        <Button type="primary">antd按钮</Button>
        <hr />
        <h4>redux的初试</h4>
        <p>{this.state.count}</p>
        <Button type="primary" onClick={() => this.changeCount(1)}>
          +1
        </Button>
        <Button type="primary" onClick={() => this.changeCount(-1)}>
          -1
        </Button>
        <Button type="primary" onClick={() => this.changeCount(5)}>
          +5
        </Button>
      </div>
    );
  }

  changeCount(number) {
    // 这里只是store的state的改变，但是页面没有渲染
    store.dispatch(countAction.changeMore(number));
  }
}

export default TAntd;

// craco.config.js

const CracoLessPlugin = require("craco-less");
const path = require("path");

module.exports = {
  webpack: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { "@primary-color": "#1DA57A" },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

// App.less

@import "~antd/dist/antd.less"; // 引入antd的样式

.App {
  text-align: center;
}