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

samscat

于 2024-09-01 23:05:33 发布

阅读量154

点赞数 1

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/samscat/article/details/141791761

版权

使用自定义类名className，引入样式文件进行样式覆盖

import React from 'react';
import { Button } from 'antd';

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

export default MyComponent;

.custom-button {
  background-color: blue;
  color: white;
}

使用内联样式

import React from 'react';
import { Button } from 'antd';

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

export default MyComponent;

使用css module 中的 :global 进行全局样式覆盖

// test.module.css

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

/* 全局样式 */
:global(body) {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

使用styled-components 编写样式化的组件

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;