Adding Custom CSS Support for all component in Paste

[deepak-thomas-t]

We would like to add support to add css styling to all component by passing those css props a parameter to the component because of lack of CSS customisation support in the current implementation. For our use case, we are providing users option to customise all component using CSS .

We would need to support to add custom css so that they can make all the changes that they want. We could have a implementation of concatenation in the paste component by which we can concatenate the css that is passed by the props and default css props of paste component.

[nkrantz]

Hi @deepak-thomas-t,

We recommend that Flex customers building custom UIs with Paste use the CustomizationProvider to customize their components.

Using the CustomizationProvider, you can provide an elements prop that allows you to provide specific style overrides to each component type or instance. Here's an example CodeSandbox using the CustomizationProvider to target components. You'll notice that the Alert and Badge components are given specific style overrides across the board, but you can also target specific instances of an element using the element prop on the component, as I'm doing in the CodeSandbox with Inline Code. For certain components, you'll have to target a subcomponent in order to override styles, like in the File Picker example. I'm overriding the "No file uploaded" text color using the FILEPICKER_TEXT selector. In order to find the appropriate selector for your component, you can inspect the component in the DOM and target any data-paste-element value.

We're going to be writing documentation on targeting components with the Customization Provider soon, thank you for your patience while our team's capacity is lowered! Let me know if you have any more questions about Customizing Paste components.

[deepak-thomas-t]

The problem that we face it that every component would need to be wrapped in the is CustomizationProvider if we are to implement it which would be a big over head to the implementation , would it be a better if we are able to pass on css directly to the component rather than providing a wrapper when we want to change something

[SiTaggart]

Hi @deepak-thomas-t

The Customization Provider is designed similarly to any theme provider and the Flex theme provider. There only needs to be one instance at the root of the application, and any element customizations will apply to the entire set of components that are placed as children.

There really isn't a need to wrap each component in a provider, so we're not quite sure why that needs to be the case for you. Is there any reason why a single root level customization provider doesn't work for you?

[serifluous]

Closing due to inactivity. Please let us know if we can help further!