New to KendoReact? Start a free 30-day trial

Styled Components Support

To style the KendoReact components, you can also use the styled-components library which provides enhanced CSS options for styling React component systems.

Styling Specific Components

To style a specific KendoReact component, pass it to the styled factory.

    import styled from 'styled-components'
    import { Button } from '@progress/kendo-react-buttons'

    const StyledButton = styled(Button)`
        color: palevioletred;
        font-weight: bold;
    `;

Styling Nested Elements

Many KendoReact components render in such a way that multiple nested elements are induced. By default, the set styles are passed to the top DOM element of the KendoReact component.

The following example demonstrates how to style nested elements over the styled-components library. Alternatively, you can use the approach for nested styling in the styled components documentation

    // This will set the grey color and the bold font only over the Grid the elements.
    const StyledGrid = styled(Grid)`
        color: palevioletred;
        & th {
            color: grey
            font-weight: bold;
        }
    `;

Styling over Dynamically Computed Props

You can also customize the styles based on the props that are set to the styled component.

    const StyledButton = styled(Button)`
    color: palevioletred;
    font-weight: bold;
        ${props =>
            props.disabled ?
            css`
            background: red;
            `:  css`
            background: green;
            `};
    `;

     <StyledButton disabled={true}>Disabled Button </StyledButton>

Sample Implementation

The following example demonstrates how to modify the header cells and specific columns in the Grid and uses a styled component as a custom cell.

Example
View Source
Change Theme: