影响嵌套组件的PrimeNG自定义CSS

/* 低优先级选择器 */
.ui-button {
  background-color: blue;
}

/* 高优先级选择器 */
.ui-button.my-custom-button {
  background-color: red;
}

import styles from './MyComponent.module.css';

const MyComponent = () => (
  <div className={styles.container}>
    <Button className={styles.customButton}>Click me</Button>
  </div>
);

/* 在主题样式之后加载自定义样式 */
.ui-button {
  background-color: blue !important;
}

/* 覆盖浏览器默认样式 */
button {
  margin: 0;
  padding: 0;
}

const MyComponent = () => {
  const customStyle = { backgroundColor: 'red' };

  return (
    <div>
      <Button style={customStyle}>Click me</Button>
    </div>
  );
};

import React from 'react';
import { Button } from 'primeng/button';
import './MyComponent.css';

const MyComponent = () => (
  <div className="my-component">
    <Button className="custom-button">Click me</Button>
  </div>
);

/* 确保选择器具有足够的优先级 */
.my-component .custom-button {
  background-color: blue;
  color: white;
}