New to KendoReact? Start a free 30-day trial

Integration with Styled Components

Environment

Product Version	9.0.0
Product	Progress® KendoReact

Description

This KB article also answers the following question:

How to customize the look of the KendoReact components with the styled-components library

Styling Specific Components

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

jsx

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

jsx

// 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.

jsx

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

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