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. 在根目录建立样式文件修改全局样式
相关推荐
attitude.x8 分钟前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java11 分钟前
CSS3核心技术
前端·css·css3
空山新雨(大队长)25 分钟前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术1 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫1 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓1 小时前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java1 小时前
CSS的文本样式
前端·css
前端小趴菜051 小时前
css - 滤镜
前端·css
祈祷苍天赐我java之术1 小时前
理解 CSS 浮动技术
前端·css