35.9.0 (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
- #1882 - Thanks @beccanelson!
- #1856 - Thanks @tvsmk!