Как переопределить стили темы Radix ::before ::after ⇐ CSS

[Anonymous]

Я использую тему Radix https://www.radix-ui.com/themes/docs/ov ... ng-started, и я специально использую компонент Table.
Я хочу переопределить стиль по умолчанию только для компонента Table.Header таблицы - чтобы избавиться от стиля границ, а именно border-styling:none, чтобы он соответствовал дизайну заголовка без границ.
Однако после каждого метода, который я пробовал, у меня есть не удалось этого сделать - я устал:

• Встроенные стили для переопределения
• переопределения класса попутного ветра
• определение пользовательского класса в globals.css для конкретного таргетинга ::before и ::after
• загрузка CSS-файла темы счисления перед моим globals.css, чтобы его можно было переопределить
• Пытался загрузить в системе счисления CSS-файл темы в мой файл globals.css для обработки попутным ветром (импортируется перед импортом попутного ветра)

Но, увы, прогресса у нас нет. Кто-нибудь еще сталкивался с этой проблемой при оформлении темы Radix? У меня пока нет решения.
Вот снимок кода того, что я сделал для большего контекста:
globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
.wire1 {
@apply border border-red-300;
}

.wire2 {
@apply border border-blue-300;
}

.wire3 {
@apply border border-green-300;
}

.font-bf-medium-3 {
-webkit-text-stroke: 0.3px currentColor;
}

.font-bf-medium-1 {
-webkit-text-stroke: 0.1px currentColor;
}

.font-bf-medium-0 {
-webkit-text-stroke: 0px currentColor;
}
}

@layer components {
@layer components {
.custom-table-header,
.custom-table-header::before,
.custom-table-header::after {
border-style: none !important;
border-width: 0 !important;
border-color: transparent !important;
box-sizing: border-box;
}
}
}

файл компонента

const baseStyles: React.CSSProperties = {
'--table-row-box-shadow': 'none',
'--table-row-background-color': 'transparent',
boxShadow: 'none',
} as React.CSSProperties;

const headerCellStyles: React.CSSProperties = {
border: 'none',
boxShadow: 'none',
};

const rowStyles: React.CSSProperties = {
...baseStyles,
};

const cellStyles: React.CSSProperties = {
...baseStyles,
};

const headerStyles: React.CSSProperties = {
borderWidth: 0,
borderStyle: 'none',
borderColor: 'transparent',
};

const columnHeaderRowStyles: React.CSSProperties = {
...baseStyles,
border: 'none',
};

const columnHeaderCellStyles = (
width: string | number,
): React.CSSProperties => ({
...headerCellStyles,
width,
});

const bodyCellStyles = (width: string | number): React.CSSProperties => ({
...cellStyles,
width,
});

const TableWithTitles = ({
data,
columnTitles,
columnWidths,
showColumnLines = false,
onEllipsisClick,
}: TableProps) => {
const effectiveWidths = columnWidths
? columnWidths
: Array(columnTitles.length).fill('auto');

const { rowCount, colCount } = generateRowsColsForTable(data);

return (



{Array.from({ length: colCount }).map((_, c) => (

{columnTitles[c]}

))}




{Array.from({ length: rowCount }).map((_, rowIndex) => (

{Array.from({ length: colCount }).map(
(__, columnIndex) => (

{data[rowIndex]?.[columnIndex] ?? null}

),
)}
{onEllipsisClick && (



)}

))}


);
};

export default TableWithTitles;

_app.tsx (удалены некоторые импортированные файлы, чтобы скрыть название компании)
import '@radix-ui/themes/styles.css';
import '../../../libs/styles/globals.css';
import { AppProps } from 'next/app';
import type { ReactElement } from 'react';
import type { NextPage } from 'next';
import ReactModal from 'react-modal';
import { ErrorBoundary, GoogleScripts } from '@frontend/shared/ui-kit/v1';
import { useAppSelector, wrapper } from '@frontend/agency/app-setup';
import { Layout } from '@frontend/agency/ui-components';
import { ROOT_ELEMENT_ID } from '@frontend/shared/ui-cdk';
import { GlobalStyles } from '@frontend/shared/ui-kit/styles';
import { AgencyAppProviders } from '@frontend/agency/app-providers';
import '@fontsource-variable/inter';

// Global third-party styles
import 'react-loading-skeleton/dist/skeleton.css';
import 'react-datepicker/dist/react-datepicker.css';
import 'react-toastify/dist/ReactToastify.css';
import { Theme } from '@radix-ui/themes';

initializeMomentLocale();
initializeErrorLogging();

ReactModal.setAppElement(`#${ROOT_ELEMENT_ID}`);

// eslint-disable-next-line @typescript-eslint/ban-types
export type NextPageWithLayout = NextPage & {
getLayout?: (page: ReactElement) => ReactElement;
};

type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout;
};

function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
const { dashboardIsLoaded } = useAppSelector(state => state.projectDetails);
const { data: selfData } = useGetSelfQuery();

const getLayout =
Component.getLayout ??
(page => {page});

const page = (



);

const componentWithLayout = (

{getLayout(page)}


);

return (


{componentWithLayout}

);
}

export default wrapper.withRedux(CustomApp);


Подробнее здесь: https://stackoverflow.com/questions/798 ... ter-styles