This took a while for me to workout, you can't change the colour of an imported svg (easily), how i managed to do and keep themes / colours from createStyles
in my react application is like so:
<MURadio
icon={
<svg
width="24px"
height="24px"
viewBox="0 0 24 24"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: "2",
}}
>
<g transform="matrix(1,0,0,1,-511.714,-525.038)">
<g transform="matrix(1.04348,0,0,1.04348,511.192,523.902)">
<circle cx="12" cy="12.589" r="11.5" style={{ fill: "white" }} />
<path
d="M12,1.089C18.347,1.089 23.5,6.242 23.5,12.589C23.5,18.936 18.347,24.089 12,24.089C5.653,24.089 0.5,18.936 0.5,12.589C0.5,6.242 5.653,1.089 12,1.089ZM12,2.089C6.205,2.089 1.5,6.794 1.5,12.589C1.5,18.384 6.205,23.089 12,23.089C17.795,23.089 22.5,18.384 22.5,12.589C22.5,6.794 17.795,2.089 12,2.089Z"
className={classes.icon}
/>
</g>
</g>
</svg>
}
/>;
const useRadioButtonClasses = makeStyles<ITheme, IRadioButtonErrorProps>(
(theme) =>
createStyles({
radio: { color: theme.mvf.palette.border },
card: {
height: '100%',
},
icon: ({ isError }) => ({
fill: theme.mvf.palette.border,
...(isError && {
fill: theme.mvf.palette.error,
}),
}),
selectedRadioIcon: ({ isError }) => ({
fill: theme.mvf.palette.primary.main,
...(isError && {
fill: theme.mvf.palette.error,
}),
}),
...etc
I am assuming some level of knowledge, as this isn't full code, but MURadio
is an v4 material ui radio button in use in our app, with the custom svg
in one of the props by this material ui component - so you have change the default radio icon... and you can apply a theme colour to the custom radio icon (svg) dynamically, and as i am passing isError
state like so const classes = useRadioButtonClasses({ isError });
so we can change the svg colour if there is an error.
Works for me and same setup (class.icon) as we style the regular components, hope it helps you.