Warning: [JSS] <CreateTag />'s styles function doesn't rely on the "theme" argument. We recommend declaring styles as an object instead.ComponentName: Description

[kundarsowjanya]

hi i'm using ui5 web component but in JSS file I'm getting warning like this.

Warning: [JSS] 's styles function doesn't rely on the "theme" argument. We recommend declaring styles as an object instead.

Could you please provide me the solution for that.

Here is the code:

import { createUseStyles, Styles } from 'react-jss';
// eslint-disable-next-line import/no-unresolved
// import { JSSTheme } from '@ui5/webcomponents-react/interfaces/JSSTheme';
import { sapUiMediumMarginTop } from '@ui5/webcomponents-react-base/dist/styling/spacing';

const styles = (): Styles => ({
  bar: {
    border: 'solid 1px rgba(0,0,0,0.15)',
    boxShadow: '0px 2px 8px 0px rgba(0,0,0,0.30)',
    backgroundColor: 'white',
    position: 'fixed',
    bottom: '1%',
    width: '98%',
    margin: '1%',
  },
  header: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    margin: '1em',
},
  toolbarStyle: {
    padding: '5px',
    marginTop: '25px',
  },

});

export const useStyles = createUseStyles(styles, {
  name: 'CreateTag',
});

Thanks

[MarcusNotheis]

Hey @kundarsowjanya,

I think this function is rather in your application code than in Web Components for React? You can remove this warning by converting the styles variable from a function to an object:

import { createUseStyles, Styles } from 'react-jss';
// eslint-disable-next-line import/no-unresolved
// import { JSSTheme } from '@ui5/webcomponents-react/interfaces/JSSTheme';
import { sapUiMediumMarginTop } from '@ui5/webcomponents-react-base/dist/styling/spacing';

const styles = {
  bar: {
    border: 'solid 1px rgba(0,0,0,0.15)',
    boxShadow: '0px 2px 8px 0px rgba(0,0,0,0.30)',
    backgroundColor: 'white',
    position: 'fixed',
    bottom: '1%',
    width: '98%',
    margin: '1%',
  },
  header: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    margin: '1em',
},
  toolbarStyle: {
    padding: '5px',
    marginTop: '25px',
  },

};

export const useStyles = createUseStyles(styles, {
  name: 'CreateTag',
});

[kundarsowjanya]

Thanks for the answer