(2021-06-24)
Adds a new disableInlineStyles prop to components and primitives to support users who want to style their components by class, or use a CSS in JS solution like styled-components
When the new disableInlineStyles prop is supplied to a component like VictoryBar no styles will be supplied to either data or label components that it renders:
const StyledBar = styled(Bar)`
fill: purple;
`
const StyledLabel = styled(VictoryLabel)`
tspan {
fill: magenta;
font-family: Papyrus, fantasy;
}
`
function CustomStyledBarChart() {
return (
<VictoryChart>
<VictoryBar
disableInlineStyles
labels={[1, 2, 3, 4]}
dataComponent={<StyledBar />}
labelComponent={<StyledLabel />}
/>
</VictoryChart>
)
}The disableInlineStyles prop may also be supplied to primitive components for more granular control:
const StyledBar = styled(Bar)`
fill: purple;
`
function CustomStyledBarChart() {
return (
<VictoryChart>
<VictoryBar
labels={[1, 2, 3, 4]}
dataComponent={<StyledBar disableInlineStyles />}
/>
</VictoryChart>
)
}Related PRs