« Changelog History


victory v35.9.0 Release Notes

Release Date: 2021-06-24 // almost 3 years ago

  • ➕ 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!