How to use the react-jss.withTheme function in react-jss

To help you get started, we’ve selected a few react-jss examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github flow-typed / flow-typed / definitions / npm / react-jss_v7.x.x / test_react-jss_v7.x.x.js View on Github external
<button>{theme.primaryColor}</button>
);

class ButtonClassComponent extends React.Component {
  props: ButtonProps;

  render() {
    const { theme } = this.props;

    return (
      <button>{theme.primaryColor}</button>
    );
  }
};

const ThemedButtonFunctionalComponent = withTheme(ButtonFunctionalComponent);

// $ExpectError - missing prop "onClick"
;

// No error
 {}} /&gt;;

const ThemedButtonClassComponent = withTheme(ButtonClassComponent);

// $ExpectError - missing prop "onClick"
;

// No errors
 {}} /&gt;;

// ===================================
github flow-typed / flow-typed / definitions / npm / react-jss_v7.x.x / test_react-jss_v7.x.x.js View on Github external
return (
      <button>{theme.primaryColor}</button>
    );
  }
};

const ThemedButtonFunctionalComponent = withTheme(ButtonFunctionalComponent);

// $ExpectError - missing prop "onClick"
;

// No error
 {}} /&gt;;

const ThemedButtonClassComponent = withTheme(ButtonClassComponent);

// $ExpectError - missing prop "onClick"
;

// No errors
 {}} /&gt;;

// ===================================
// createTheming
// ===================================

createTheming('__MY_THEME__');
github frontcraft / react-standalone-form / src / core / FormButton.js View on Github external
}
      {children}
    
  )
}

FormButton.propTypes = {
  callback: PropTypes.func,
  component: PropTypes.elementType,
  loading: PropTypes.bool,
  loadingComponent: PropTypes.elementType,
  reset: PropTypes.bool,
  children: PropTypes.node.isRequired,
}

export default withTheme(withSubmit(FormButton))
github wavesplatform / wavesplatform.com / src / common / components / Icon / index.jsx View on Github external
const IconComponent = IconsMap[name] || CustomIcon;

  const passedColor =
    color !== 'inherit'
      ? theme.palette[color.split('-')[0]][color.split('-')[1]]
      : undefined;

  return ;
};

Icon.defaultProps = {
  size: '100%',
  color: 'inherit',
};

export default withTheme(Icon);
github nordnet / nordnet-ui-kit / src / components / input / checkbox.jsx View on Github external
);

  const icon = ;

  return <span>{checked ? icon : null}</span>;
}

Checkbox.propTypes = {
  checked: PropTypes.bool,
  disabled: PropTypes.bool,
  className: PropTypes.string,
  theme: PropTypes.shape(),
};

export { Checkbox as Component };
export default withTheme(Checkbox);
github janhartmann / flight-spotter / client / src / airports / AirportLayer.tsx View on Github external
if (onMouseLeave) {
      map.on("mouseleave", layerId, e => {
        map.getCanvas().style.cursor = "";
        onMouseLeave(e);
      });
    }

    return () => {
      map.removeLayer(layerId);
    };
  }, []);

  return null;
};

export default withTheme(AirportLayer);
github janhartmann / flight-spotter / client / src / flights / FlightTrajectoryLayer.tsx View on Github external
filter: ["==", "type", "arrival"]
    });

    return () => {
      ["trajectory", "arrival"].forEach(layer => {
        if (map.getLayer(layer)) {
          map.removeLayer(layer);
        }
      });
    };
  }, []);

  return null;
};

export default withTheme(FlightTrajectoryLayer);
github janhartmann / flight-spotter / client / src / flights / FlightLayer.tsx View on Github external
if (onClick) {
      map.on("click", id, e =&gt; {
        onClick(e);
      });
    }

    return () =&gt; {
      map.removeLayer(id);
    };
  }, []);

  return {children};
};

export default withTheme(FlightLayer);