Styled-Components Usage in React Components

Syncfusion^® React components support custom styling using the styled-components library.

Adding styled-components to the application

To style a Syncfusion^® React component using styled-components, follow these steps:

Import styled-components in the src/App.tsx file.
Use the styled factory to wrap the Syncfusion® React component.
Override the component's styles to create a styled version of it.

const StyledButton = styled(Button)`
  &&.sf-btn {
      background: #75e1ef;
      border-color: #75e1ef;
      color: #000000;
    }
`;

const StyledButton = styled(Button)`
  &&.sf-btn {
      background: #75e1ef;
      border-color: #75e1ef;
      color: #000000;
    }
`;

The following code demonstrates how to create a styled Syncfusion^® React Button component using styled-components:

import * as React from 'react';
import * as ReactDom from 'react-dom';
import styled from 'styled-components';
import { Button } from '@syncfusion/react-buttons';

export default function App() {
  const StyledButton = styled(Button)`
    &&.sf-btn {
      background: #75e1ef;
      border-color: #75e1ef;
      color: #000000;
    }
  `;

  return (
    <div className="component-section">
      <StyledButton>Button</StyledButton>
    </div>
  );
};

import * as React from 'react';
import * as ReactDom from 'react-dom';
import styled from 'styled-components';
import { Button } from '@syncfusion/react-buttons';

export default function App() {
  const StyledButton = styled(Button)`
    &&.sf-btn {
      background: #75e1ef;
      border-color: #75e1ef;
      color: #000000;
    }
  `;

  return (
    <div className="component-section">
      <StyledButton>Button</StyledButton>
    </div>
  );
};

The output will appear as follows:

Styling with dynamically computed props

We can style the Syncfusion React components dynamically based on props.

const StyledButton = styled(Button)`
&&.sf-btn {
    ${props => props.disabled && css`
      background: palevioletred;
      color: white;
    `}
  }
`;

const StyledButton = styled(Button)`
&&.sf-btn {
    ${props => props.disabled && css`
      background: palevioletred;
      color: white;
    `}
  }
`;

The below example code shows the dynamically styling the components using props.

import * as React from 'react';
import * as ReactDom from 'react-dom';
import styled from 'styled-components';
import { css } from 'styled-components'
import { Button } from '@syncfusion/react-buttons';

function App() {
 const StyledButton = styled(Button)`
 &&.sf-btn {
  ${props => props.disabled && css`
    background: palevioletred;
    color: white;
  `}
  }
`;
  return (
  <div className='control-pane'>
    <StyledButton disabled={true}>Button</StyledButton>
  </div>);
}
export default App;

import * as React from 'react';
import * as ReactDom from 'react-dom';
import styled from 'styled-components';
import { css } from 'styled-components'
import { Button } from '@syncfusion/react-buttons';

function App() {
 const StyledButton = styled(Button)`
 &&.sf-btn {
  ${props => props.disabled && css`
    background: palevioletred;
    color: white;
  `}
  }
`;
  return (
  <div className='control-pane'>
    <StyledButton disabled={true}>Button</StyledButton>
  </div>);
}
export default App;

The output will appear as follows:

Styled-Components Usage in React Components

Adding styled-components to the application

Styling with dynamically computed props

Enhance your React apps with Syncfusion components today