---
title: Restyle react-table's MUI surfaces in house styles
type: task
status: draft
description: >-
  Replace the Material UI look of every surface react-table renders with house styles drawn from its
  --rt-* tokens, so the data views are on-brand and dark-mode ready; drop the MUI dependency later.
base_uri: user:task/react-table/restyle-react-table-off-mui-styling.md
created_at: '2026-10-18T00:57:27.465Z'
entity_id: e557dc2e-3a24-4b1e-b5b8-7d4beb4e87ce
observations:
  - ████████████████████████████████████████████████
  - ████████████████████████████████████████████████
owner_identity_uri: █████████████████████████
priority: Medium
public_read: true
relations:
  - relates [[█████████████████████-██████-███-███-████████-█████]]
tags:
  - user:tag/league-xo-football.md
  - user:tag/base-project.md
updated_at: '2026-10-18T02:05:26.101Z'
visibility_analyzed_at: '2026-11-05T23:50:42.888Z'
---

Restyle every MUI surface react-table renders in house styles, so the data-view table reads as xo.football rather than as Material UI, and themes for dark mode with no second pass. Dropping the MUI dependency is a later follow-on.

## Why

Operator direction, 2026-10-18: one consistent, on-brand style on every surface, no MUI styling visible anywhere; removing the dependency is wanted eventually but comes second. react-table renders inside league's data views and still carries MUI's look throughout. The league side of the same direction is [[█████████████████████-██████-███-███-████████-█████]], and [[████████████████████-████-███████]] cannot release while MUI styling shows.

## Starting state (2026-10-18)

- `repository/active/react-table/src` imports `@mui/material` 74 times, `@mui/icons-material` 70, `@mui/base` 11 and `@mui/x-date-pickers` 3, across 31 files (counted with `git grep -h -o "from '@mui/[a-z-]*" -- src`).
- Its colours already resolve through `--rt-*` custom properties (react-table `ff0d218`): the `$rt_*` Stylus mirrors are `var(--rt-*)`, and the host sets `--rt-ground`, `--rt-frame-rule` and `--rt-frame-shadow`. A restyled MUI piece should take those tokens, which is what makes it themeable.
- About 150 colour literals remain in `src` outside `tokens.styl`; their migration is a cluster of the dark-mode plan and overlaps this work.
- League consumes react-table from source (`react-table/index.js`), compiled with league's injected stylesheets, so a react-table stylesheet must never name a league variable (react-table STYLE.md § Stylus access).

## Scope

- Every rendered MUI component in `src` restyled in house styles from `--rt-*` tokens: text inputs, selects, menus, popovers, checkboxes, switches, chips, tooltips, buttons, date pickers.
- MUI icons replaced by the icon set league already moved to (league's MUI task, slice A).
- Where rebuilding behaviour is costly (the date pickers, combobox-like controls), keep MUI underneath, fully restyled.

This is a Draft. Plan it with [[user:workflow/write/write-software-implementation-plan.md]] before building.