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.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import styled, { css } from 'styled-components';

import products from './products.json';
import { Button } from '@progress/kendo-react-buttons';

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

const StyledGrid = styled(Grid)`
  color: #D81052;
  & th {
    color: grey
    font-weight: bold;
  }
  & td:nth-child(1) {
    font-weight: bold;
  }
`;

const StyledTD = styled.td`
  pointer-events:none;
  opacity: 0.5
  ${props =>
    props.discontinued
      ? css`background-color: rgb(55, 180, 0,0.32);`
      : css`background-color: rgb(243, 23, 0, 0.32);`
  };
`;

class App extends React.Component {
  state = {
    gridData: products
  }

  render() {
    return (
      <div>
        <StyledButton disabled={true}>Disabled Button </StyledButton>
        <hr />
        <StyledGrid
          style={{ height: '400px' }}
          data={this.state.gridData}
        >
          <Column field="ProductID" title="ID" width="40px" />
          <Column field="ProductName" title="Name" width="250px" />
          <Column field="Category.CategoryName" title="CategoryName" width="200px" />
          <Column field="UnitPrice" title="Price" width="80px" />
          <Column field="UnitsInStock" title="In stock" width="80px" />
          <Column field="Discontinued" width="120px"
            cell={(props) => (
              <StyledTD discontinued={props.dataItem.Discontinued}>
                <input type="checkbox" checked={props.dataItem[props.field]} />
              </StyledTD>
            )} />
        </StyledGrid>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.querySelector('my-app')
);
 /