How to use react-jss - 10 common examples

<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;;

// ===================================

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__');

// No error
 {}} />;

const ThemedButtonClassComponent = withTheme(ButtonClassComponent);

// $ExpectError - missing prop "onClick"
;

// No errors
 {}} />;

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

createTheming('__MY_THEME__');

hasWarning: PropTypes.bool,
  helpText: PropTypes.node,
  leftAddon: PropTypes.node,
  rightAddon: PropTypes.node,
  /** Only used when type === textarea */
  lineCount: PropTypes.number, // eslint-disable-line
};

InputDefault.defaultProps = {
  type: 'text',
  variant: 'primary',
  lineCount: 3,
};

export { InputDefault as Component, styles };
export default injectSheet(styles, { injectTheme: true })(InputDefault);

* Specified width of component
   */
  width?: string;

  /*
   * Specified height of component
   */
  height?: string;

  /*
   * State of indicator (using ValueState)
   */
  state?: ValueState;
}

const useStyles = createUseStyles>(styles, { name: 'ProgressIndicator' });

const ProgressIndicator: FC = forwardRef(
  (props: ProgressIndicatorPropTypes, ref: Ref) => {
    const { percentValue, displayValue, width, height, className, style, tooltip, state, slot } = props;

    const classes = useStyles();

    // CSS classes
    const wrapperClasses = StyleClassHelper.of(classes.wrapper);
    const progressBarClasses = StyleClassHelper.of(classes.progressbar);
    const progressBarTextClasses = StyleClassHelper.of(classes.progressBarText);

    const progressBarStyle = { flexBasis: `${percentValue}%` };

    // change content density
    const theme = useTheme() as JSSTheme;

function createContext() {
  return {
    jss,
    theme,
    // This is needed in order to deduplicate the injection of CSS in the page.
    sheetsManager: new Map(),
    // This is needed in order to inject the critical CSS.
    sheetsRegistry: new SheetsRegistry(),
  };
}

export default function handleRequest (req, res, next) {
  const context = {}

  const sheets = new SheetsRegistry()

  // inside a request
  const promises = []
  // use `some` to imitate `

const route = await router.resolve(context);

    if (route.redirect) {
      res.redirect(route.status || 302, route.redirect);
      return;
    }

    const data = { ...route };

    // Creates JSS with default presets
    // https://github.com/cssinjs/jss-preset-default
    const jss = createJss(jssPreset());
    // JSS Server side rendering
    // https://github.com/cssinjs/react-jss#server-side-rendering
    const sheets = new SheetsRegistry();
    const sheetsManager = new Map();
    const theme = getTheme(req.cookies.get('theme'));
    const rootComponent = props => (
      
        
          {route.component}
        
      
    );
    await getDataFromTree(rootComponent({ disableStylesGeneration: true }));
    // this is here because of Apollo redux APOLLO_QUERY_STOP action
    await Promise.delay(0);
    data.children = await ReactDOM.renderToString(rootComponent());
    data.styles = [
      { id: 'css', cssText: [...css].join('') },
      { id: 'jss', cssText: sheets.toString() },

constructor() {
    // Create a sheetsRegistry instance.
    this.sheetsRegistry = new SheetsRegistry();

    // Create a theme instance.
    this.theme = createMuiTheme({
      palette: {
        primary: green,
        accent: red,
        type: 'light'
      }
    });

    this.generateClassName = createGenerateClassName();
    this.grabCss = this.grabCss.bind(this);
  }

export function renderOnServer(componant, theme, req, context, store) {

  // Create a sheetsRegistry instance.
  const sheetsRegistry = new SheetsRegistry();

  const generateClassName = createGenerateClassName();

  const html = renderToString(
    
      
        
          
            {componant}
          
        
      
    
  );

  const css = sheetsRegistry.toString();