RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.telerik.com/kendo-react-ui/components/knowledge-base/styled-components below:

React Integration with Styled Components

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.

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


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>;