Replies: 1 comment
-
@marpstar Hi, I don't think you need to write This is the example that works strictly for toggled or no toggled, for hover apply extra styling: import React from "react";
import {
FluentProvider,
makeStyles,
ToggleButton,
} from "@fluentui/react-components";
import { lightTheme } from "./ui/theme";
const useStyles = makeStyles({
pressed: {
backgroundColor: lightTheme.colorBrandBackground,
},
unpressed: {
backgroundColor: lightTheme.colorNeutralBackground1,
},
});
export default function App() {
const styles = useStyles();
// Using a state to track the toggle state
const [isToggled, setIsToggled] = React.useState(false);
return (
<FluentProvider theme={lightTheme}>
<ToggleButton
className={isToggled ? styles.pressed : styles.unpressed}
checked={isToggled}
onClick={() => setIsToggled(!isToggled)}
>
Toggle Me
</ToggleButton>
{/* Your other content */}
</FluentProvider>
);
} |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I'm wondering if there's a way to override the styles of a
ToggleButton
whenchecked
istrue
, without having to create some new class and track things myself.Specifically, I want to set the
color
of my button to my theme's primary color if and only if the button is "checked". Is there some selector I can use to do that?Beta Was this translation helpful? Give feedback.
All reactions