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.
