🎉 ReactGrid 5.0 is released. Read more →
DemoDemoDev SupportDev Support
GitHubGitHub (opens in a new tab)
  • Introduction
      • Getting started
        • Cell span
        • Column and row reordering
        • Column resizing
        • Copy Cut Paste
        • Fill handle
        • Handling data changes
        • Initial focus location
        • Keyboard shortcuts
        • Sticky rows and columns
        • Styles ranges
      • Cell templates
        • NonEditableCell
        • NumberCell
        • TextCell
      • Create your own cell template
      • Styling
          • ReactGridAPI
          • ReactGridProps
          • Behavior
          • Cell
          • CellContext
          • CellsLookup
          • Column
          • NumericalRange
          • Row
          • StyledRange
          • useCellContext
          • useReactGridAPI
          • isValidKey
      • Getting started
      • Implementing core features
        • Cell span
        • Column and row reordering
        • Column resizing
        • Context menu
        • Embedding on a website
        • Fill handle
        • Focus management
        • Full width header
        • Group Id
        • Handling data changes
        • Highlights
        • Internationalization
        • Keyboard shortcuts
        • Responsive sticky
        • Selections
        • Sticky rows and columns
        • Undo/redo feature
        • Cell templates
        • CheckboxCell
        • ChevronCell
        • DateCell
        • DropdownCell
        • EmailCell
        • HeaderCell
        • NumberCell
        • TextCell
        • TimeCell
      • Create your own cell template
      • Styling
        • Advanced styling
        • Basic styling
        • Sass variables
      • API
          • Cell
          • CellLocation
          • CellStyle
          • CellTemplate
          • CellTemplates
          • Column
          • Highlight
          • Interfaces
          • MenuOption
          • ReactGrid & ReactGridProps
          • Row
          • TextLabels
          • CellChange
          • Compatible
          • DefaultCellTypes
          • DropPosition
          • Id
          • SelectionMode
          • Types
          • Uncertain
          • UncertainCompatible
          • Functions & Enums
      • Getting started
      • Implementing core features
        • Cell span
        • Column and row reordering
        • Column resizing
        • Context menu
        • Embedding on a website
        • Fill handle
        • Focus management
        • Full width header
        • Group Id
        • Handling data changes
        • Highlights
        • Internationalization
        • Keyboard shortcuts
        • Responsive sticky
        • Selections
        • Sticky rows and columns
        • Undo/redo feature
      • Cell templates
        • CheckboxCell
        • ChevronCell
        • DateCell
        • DropdownCell
        • EmailCell
        • HeaderCell
        • NumberCell
        • TextCell
        • TimeCell
      • Create your own cell template
      • Styling
        • Advanced styling
        • Basic styling
        • Sass variables
      • API
        • Introduction
        • Getting started
        • Implementing core features
        • Cell templates
        • Create your own cell template
        • Styling
        • API
        • FAQ
        • Functions & Enums
        • Interfaces
          • Cell
          • CellLocation
          • CellStyle
          • CellTemplate
          • CellTemplates
          • Column
          • Highlight
          • MenuOption
          • ReactGrid & ReactGridProps
          • Row
          • TextLabels
        • Types
          • CellChange
          • Compatible
          • DefaultCellTypes
          • DropPosition
          • Id
          • SelectionMode
          • Uncertain
          • UncertainCompatible
      • Getting started
      • Implementing core features
        • Column and row reordering
        • Column resizing
        • Context menu
        • Embedding on website
        • Fill handle
        • Focus management
        • Full width header
        • Group Id
        • Handling data changes
        • Highlights
        • Internationalization
        • Keyboard shortcuts
        • Selections
        • Sticky rows and columns
      • Cell templates
        • CheckboxCell
        • DateCell
        • EmailCell
        • GroupCell
        • HeaderCell
        • NumberCell
        • TextCell
        • TimeCell
      • Create your own cell template
      • Styling
        • Advanced styling
        • Basic styling
        • Sass variables
      • API
        • Interfaces
          • Cell
          • CellLocation
          • CellStyle
          • CellTemplate
          • CellTemplates
          • Column
          • Highlight
          • MenuOption
          • ReactGrid & ReactGridProps
          • Row
          • TextLabels
        • Types
          • CellChange
          • Compatible
          • DefaultCellTypes
          • DropPosition
          • Id
          • Selection mode
          • Uncertain
          • UncertainCompatible
        • Functions
  • More
  • FAQ
  • Blog
Question? Give us feedback → (opens in a new tab)
Introduction
4.0
Styling

In this chapter, you will learn about simple and advanced ReactGrid components styling using Sass variables.

  • Basic styling
  • Advanced styling
  • Sass variables
Create your own cell templateAdvanced styling

Info

    Privacy Policy

Explore

  • Demo
  • Documentation
  • Development Support

Social

  • npm icon
  • github icon

Contact

  • Silevis Software Sp. z o.o.
  • Sienkiewicza Street 17/3
  • 25-007 Kielce, Poland
© Silevis Software Sp. z o.o. 2019-2024