MultiSelectDropdown - Can't apply css via styled components

Question

I'm trying to apply CSS to the Syncfusion MultiSelect component using styled-components by targeting the default CSS classes mentioned in the documentation. I've followed the approach used in other components as shown in the Syncfusion styled-components documentation, but my styles are not being applied. Can anyone help? Here’s a StackBlitz example.

Code example (same as StackBlitz):

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import styled from 'styled-components';

const StyledMultiSelectComponent = styled(MultiSelectComponent)`
&.e-multiselect {
  background-color: red!important;
}
&.e-multiselect.e-input-group .e-multi-select-wrapper {
    background-color: red!important;
    border:1px solid #c000ff;
  }
`;

function App() {
  // define the array of data
  let sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
  return (
    // specifies the tag for render the MultiSelect component
    <StyledMultiSelectComponent
      id="mtselement"
      dataSource={sportsData}
      placeholder="Find a game"
    />
  );
}
createRoot(document.getElementById('sample')).render(<App />);

Yohapuja Selvakumaran · Answer

Hi Sidney Carlini,Thank you for reaching out to us. To style the MultiSelect
component, you can define the styles in a CSS file and then import this file
into your JavaScript file. This approach ensures that the styles are applied
correctly to the component.Here’s an example:

[index.css]
   
  .e-multiselect {
    background-color: red !important;
  }
  .e-multiselect.e-input-group .e-multi-select-wrapper {
    background-color: red !important;
    border: 1px solid #c000ff !important;
  }

[index.js]
   
  import './index.css';

For a practical demonstration, please refer to the sample
provided below:Sample: https://stackblitz.com/edit/react-qyw5mb-2rqsky?file=index.js
Regards,Yohapuja S

Sidney Carlini Junior | Martinelli Labs · Answer

Hi Yohapuja Selvakumaran,I've resolved the issue using the approach you suggested. However, this is not consistent with how I've implemented styling in other components, as they typically accept styled components.The key point here is that I need to use styled components to dynamically update the dropdown component with error messages and other conditional styles based on props. This flexibility is crucial for maintaining consistency and ease of customization across the application.Could you advise on how we can implement this with styled components or suggest any adjustments that might allow us to use them effectively in this context?

Yohapuja Selvakumaran · Answer

Hi Sidney Carlini,Thank you for your patience. After examining the concern
about styling the multiselect with styled component, we'd like to convey that
currently in our component architecture, components like multiselect and other
input-based components, where the root element is placed inside the wrapper,
cannot be styled using styled component directly. This is because styled
components generate a unique class name for the root element of the custom
component. Specifically, for the MultiselectComponent, in which the root
element is the input element inside the wrapper. Therefore, we are unable to
style those components directly using styled components, so we suggest styling
by overriding the custom classes provided within the component.You can find documentation for customization using CSS
classes here: https://ej2.syncfusion.com/react/documentation/multi-select/styleRegards,Yohapuja S