Search results

Styled-Component support

22 Nov 2022 / 2 minutes to read

Syncfusion React components allow you to enhance the styling using styled-component library.

Add styled component to the application

Import styled-components in the src/App.tsx file. To style our Syncfusion React component, pass the component in styled factory and override the EJ2 component styles. Here, StyledButton is the styled component.

Copied to clipboard
 const StyledButton = styled(ButtonComponent)`
  &.e-btn {
    background: #75e1ef;
    color: #00000;
  }
`;
Copied to clipboard
const StyledButton = styled(ButtonComponent) `
  &.e-btn {
    background: #75e1ef;
    color: #00000;
  }
`;

Refer to the below code to create a styled button.

Copied to clipboard
import * as React from 'react';
import * as ReactDom from 'react-dom';
import styled from 'styled-components';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

 function App() {
 const StyledButton = styled(ButtonComponent)`
  &.e-btn {
    background: #75e1ef;
    color: #00000;
  }
`;
  render() {
    return (<div className='control-pane'>
      <StyledButton>Button</StyledButton>
    </div>);
  }
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));
Copied to clipboard
import * as React from 'react';
import * as ReactDom from 'react-dom';
import styled from 'styled-components';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
    const StyledButton = styled(ButtonComponent) `
  &.e-btn {
    background: #75e1ef;
    color: #00000;
  }
`;
    render();
    {
        return (<div className='control-pane'>
      <StyledButton>Button</StyledButton>
    </div>);
    }
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

Dynamically computed props styling

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

Copied to clipboard
const StyledButton = styled(ButtonComponent)`
&.e-btn {
  ${props => props.disabled && css`
    background: palevioletred;
    color: white;
  `}
  }
`;
Copied to clipboard
const StyledButton = styled(ButtonComponent) `
&.e-btn {
  ${props => props.disabled && css `
    background: palevioletred;
    color: white;
  `}
  }
`;

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

Copied to clipboard
import * as React from 'react';
import * as ReactDom from 'react-dom';
import styled from 'styled-components';
import { css } from 'styled-components'
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
 const StyledButton = styled(ButtonComponent)`
 &.e-btn {
  ${props => props.disabled && css`
    background: palevioletred;
    color: white;
  `}
  }
`;
  return (<div className='control-pane'>
    <StyledButton disabled={true}>Button</StyledButton>
  </div>);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));
Copied to clipboard
import * as React from 'react';
import * as ReactDom from 'react-dom';
import styled from 'styled-components';
import { css } from 'styled-components';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
    const StyledButton = styled(ButtonComponent) `
 &.e-btn {
  ${props => props.disabled && css `
    background: palevioletred;
    color: white;
  `}
  }
`;
    return (<div className='control-pane'>
    <StyledButton disabled={true}>Button</StyledButton>
  </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));