react中修改组件样式的几种方法

  1. 使用自定义类名className,引入样式文件进行样式覆盖
java 复制代码
import React from 'react';
import { Button } from 'antd';

const MyComponent = () => {
  return (
    <Button className="custom-button">点击我</Button>
  );
};

export default MyComponent;
css 复制代码
.custom-button {
  background-color: blue;
  color: white;
}
  1. 使用内联样式
javascript 复制代码
import React from 'react';
import { Button } from 'antd';

const MyComponent = () => {
  return (
    <Button style={{ backgroundColor: 'blue', color: 'white' }}>点击我</Button>
  );
};

export default MyComponent;
  1. 使用css module 中的 :global 进行全局样式覆盖
css 复制代码
// test.module.css

.container {
  padding: 20px;
  background-color: lightgray;
}

/* 全局样式 */
:global(body) {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
  1. 使用styled-components 编写样式化的组件
javascript 复制代码
import React from 'react';
import { Button } from 'antd';
import styled from 'styled-components';

const StyledButton = styled(Button)`
  background-color: blue;
  color: white;
`;

const MyComponent = () => {
  return (
    <StyledButton>点击我</StyledButton>
  );
};

export default MyComponent;
  1. 在根目录建立样式文件修改全局样式
相关推荐
KenXu4 分钟前
F2C-PTD工具将需求快速转换为代码实践
前端
天天进步201510 分钟前
掌握React状态管理:Redux Toolkit vs Zustand vs Context API
linux·运维·react.js
给月亮点灯|12 分钟前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青13 分钟前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥14 分钟前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
hrrrrb21 分钟前
【Python】字符串
java·前端·python
阿笑带你学前端28 分钟前
Supabase云同步架构:Flutter应用的数据同步策略
前端
梦想CAD控件33 分钟前
(在线CAD平台)网页集成CAD SDK的方法
前端·javascript·github
用户76787977373235 分钟前
后端转全栈之Next.js文件约定
react.js·next.js
万少35 分钟前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos