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

1. 使用自定义类名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;
}

2. 使用内联样式

import React from 'react';
import { Button } from 'antd';const MyComponent = () => {return (<Button style={{ backgroundColor: 'blue', color: 'white' }}>点击我</Button>);
};export default MyComponent;

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

// test.module.css.container {padding: 20px;background-color: lightgray;
}/* 全局样式 */
:global(body) {font-family: Arial, sans-serif;margin: 0;padding: 0;
}

4. 使用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;

5. 在根目录建立样式文件修改全局样式