How to override Radix theme ::before ::after styles [closed]

I am using Radix theme https://www.radix-ui.com/themes/docs/overview/getting-started and I am specifically using the Table component.

I want to override default styling for just the Table.Header component of the Table - to get rid of border styling, so specifically border-styling:none, so it matches designs of header without borders.

However after every technique I have tried i have failed to do so - I have tired:

Inline styles to override tailwind class overrides custom class definition in globals.css to specifically target ::before and ::after loading the radix theme css file before my globals.css so it can be overriden Tried loading in the radix theme css file into my globals.css file to be handled by tailwind (imported before tailwind imports)

But still, alas we have no progress. Has anyone else run into this difficulty with Radix theme styling? I have no solution so far.

Here is a code snapshot of what I have done for more context:

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; } } }

component file

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 ( <Table.Root className="w-full border-collapse overflow-hidden rounded-[6px] border-[1px] border-gray-200" aria-label="table" style={baseStyles} > <Table.Header className="custom-table-header !border-0 !border-none" style={headerStyles} > <Table.Row className="custom-table-header !border-0 !border-none bg-transparent text-sm font-medium text-neutral-700" style={columnHeaderRowStyles} > {Array.from({ length: colCount }).map((_, c) => ( <Table.ColumnHeaderCell key={c} className={`px-4 py-2 text-left ${ showColumnLines ? 'border-r border-gray-200' : '' }`} style={columnHeaderCellStyles(effectiveWidths[c])} > {columnTitles[c]} </Table.ColumnHeaderCell> ))} </Table.Row> </Table.Header> <Table.Body> {Array.from({ length: rowCount }).map((_, rowIndex) => ( <Table.Row key={rowIndex} className="overflow-hidden rounded-[6px] border-[1px] border-gray-200 font-[400]" style={rowStyles} > {Array.from({ length: colCount }).map( (__, columnIndex) => ( <Table.Cell key={columnIndex} className={`bg-white px-4 py-3 text-sm text-neutral-900 ${ showColumnLines ? 'border-r border-gray-200' : '' } text-left align-middle`} style={bodyCellStyles( effectiveWidths[columnIndex], )} > {data[rowIndex]?.[columnIndex] ?? null} </Table.Cell> ), )} {onEllipsisClick && ( <Table.Cell className="bg-white px-4 py-3 text-left align-middle text-sm text-neutral-900"> <ElipsisButton rowIndex={rowIndex} onEllipsisClick={onEllipsisClick} /> </Table.Cell> )} </Table.Row> ))} </Table.Body> </Table.Root> ); }; export default TableWithTitles;

_app.tsx (Deleted some imports to hide company name)

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<P = {}, IP = P> = NextPage<P, IP> & { 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 => <Layout dashboardIsLoaded={dashboardIsLoaded}>{page}</Layout>); const page = ( <ErrorLogging.ErrorBoundary fallback={<ErrorBoundary />} showDialog> <Component {...pageProps} /> </ErrorLogging.ErrorBoundary> ); const componentWithLayout = ( <PostHogAnalytics selfData={selfData}> {getLayout(page)} <GoogleScripts /> </PostHogAnalytics> ); return ( <AgencyAppProviders> <GlobalStyles /> <Theme>{componentWithLayout}</Theme> </AgencyAppProviders> ); } export default wrapper.withRedux(CustomApp);