[REACT] Styled Components

[rapiduser]

Will your react wrappers support styled-components?

I couldn't find anything on the support forums or in the documentation that says it does.

I was hoping to use styled-components to override the css of the Gantt chart. I understand that we can override it directly in css files by using the class name but we have some scenarios where some css property values are dynamic so styled-components would work better.

I was hoping something like the below code would work but it does not

import styled from "styled-components";

const BryntumGanttStyled = styled(BryntumGantt)`
	&& .b-sch-label {
		...styles would be appliyed dynamically here
	}
`

return <BryntumGanttStyled {...config} />

[saki]

Well, if styled-components can override the global styles then you could probably make it working. You could also scope the selector by adding your own https://bryntum.com/docs/gantt/api/Gantt/view/Gantt#config-cls For example:

new Gantt({
    cls:'my-cls'
    // ...
})

Then you can style this individual instance of the Gantt with:

.my-cls .b-sch-label {
    // the styles to apply
}

I cannot say if and how can this approach be combined with styled-components – never tried.