How to use the @grafana/ui.useTheme function in @grafana/ui

export const DerivedFields = (props: Props) => {
  const { value, onChange } = props;
  const theme = useTheme();
  const styles = getStyles(theme);

  const [showDebug, setShowDebug] = useState(false);

  return (
    <>
      <h3>Derived fields</h3>

      <div>
        Derived fields can be used to extract new fields from the log message and create link from it's value.
      </div>

      <div>
        {value &amp;&amp;
          value.map((field, index) =&gt; {
            return (</div>

export const ActionButton: FC = (props: Props) => {
  const { onClick, text, className } = props;
  const theme = useTheme();
  const styles = getStyles(theme);
  const buttonClassName = cx(styles.button);

  return (
    <span>
      <a type="button">
        {text}
      </a>
    </span>
  );
};

export function LiveTailButton(props: LiveTailButtonProps) {
  const { start, pause, resume, isLive, isPaused, stop, splitted } = props;
  const theme = useTheme();
  const styles = getStyles(theme);

  const onClickMain = isLive ? (isPaused ? resume : pause) : start;

  return (
    <>

export function LiveTailButton(props: LiveTailButtonProps) {
  const { start, pause, resume, isLive, isPaused, stop, splitted } = props;
  const theme = useTheme();
  const styles = getStyles(theme);

  const onClickMain = isLive ? (isPaused ? resume : pause) : start;

  return (
    <>

export function TimeSyncButton(props: TimeSyncButtonProps) {
  const { onClick, isSynced } = props;
  const theme = useTheme();
  const styles = getStyles(theme);

  const syncTimesTooltip = () => {
    const { isSynced } = props;
    const tooltip = isSynced ? 'Unsync all views' : 'Sync all views to this time range';
    return <>{tooltip};
  };

  return (
    
      <button aria-label="{isSynced"> onClick()}</button>