> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling

> Nextedy RISKSHEET provides a layered styling system that controls the visual appearance of grid cells, row headers, and column groups.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

<Columns cols={3}>
  <Card title="Cell Decorators" icon="palette" href="/risksheet/reference/styling/cell-decorators">
    JavaScript functions that toggle CSS classes on cells based on data values, enabling dynamic conditional styling for risk levels, status indicators, and threshold alerts.
  </Card>

  <Card title="CSS Classes" icon="file" href="/risksheet/reference/styling/css-classes">
    Custom CSS class definitions in the `styles` configuration object, including RPN color coding, header group styling, bold formatting, and column-specific appearance rules.
  </Card>

  <Card title="Conditional Formatting" icon="file" href="/risksheet/reference/styling/conditional-formatting">
    Complete reference for combining cell decorators, styles, and formulas to create data-driven visual indicators for risk levels, workflow status, and field completeness.
  </Card>

  <Card title="Item Colors" icon="file" href="/risksheet/reference/styling/item-colors">
    Row-level and item-level color coding based on work item properties, risk parameters, and workflow status for visual risk identification across the grid.
  </Card>
</Columns>

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/yWl5nA2D0IzEnZC1/risksheet/diagrams/reference/styling/index/diagram-1.svg?fit=max&auto=format&n=yWl5nA2D0IzEnZC1&q=85&s=d5c6dee48ab2e49b31bceb41647831f8" alt="diagram" style={{ maxWidth: "660px", width: "100%" }} width="660" height="300" data-path="risksheet/diagrams/reference/styling/index/diagram-1.svg" />
</Frame>

<Tip title="CSS `!important` Required">
  Custom styles in Risksheet typically need `!important` to override the grid's default styling. Always include `!important` in `background-color` and `color` declarations within the `styles` object. Without it, your custom colors will be overridden by the grid's built-in styles.
</Tip>

## Key Configuration Properties

| Property                     | Location                    | Purpose                                               |
| ---------------------------- | --------------------------- | ----------------------------------------------------- |
| `styles`                     | Root of sheet configuration | Named CSS class definitions injected into the page    |
| `cellDecorators`             | Root of sheet configuration | JavaScript functions that toggle CSS classes per cell |
| `cellCss`                    | Column definition           | Static CSS class always applied to a column's cells   |
| `headerGroupCss`             | Column definition           | CSS class applied to the header group row             |
| `headers.rowHeader.renderer` | Headers configuration       | Custom renderer for row header conditional styling    |

## Related Sections

* [Formulas](/risksheet/reference/formulas/index) --- calculated values that drive conditional styling thresholds
* [Configuration Properties Index](/risksheet/reference/configuration/properties-index) --- full property reference for all sheet configuration settings
* [Column Types](/risksheet/reference/columns/index) --- column definitions including `cellCss` and `cellRenderer` properties

<LastReviewed date="2026-06-24" />