How to use @mui-treasury/styles - 10 common examples

To help you get started, we’ve selected a few @mui-treasury/styles 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.

siriwatknp / mui-treasury / website / src / components / organisms / ComponentMenuList.js View on Github

const ComponentMenuList = ({ menus, getOpenKeys }) =&gt; {
  const nestedStyles = useJupiterNestedMenuListStyles();
  const infoStyles = useMaterialInfoMenuItemStyles();
  const toggleStyles = useMaterialToggleMenuItemStyles();
  const { setOpened: setSidebarOpened } = useLayoutCtx();
  return (
    
      {({ location }) =&gt; {
        const paths = location.pathname.split('/');
        const lastPath = last(paths) || last(dropRight(paths));
        return (

siriwatknp / mui-treasury / website / src / components / organisms / ComponentMenuList.js View on Github

const ComponentMenuList = ({ menus, getOpenKeys }) =&gt; {
  const nestedStyles = useJupiterNestedMenuListStyles();
  const infoStyles = useMaterialInfoMenuItemStyles();
  const toggleStyles = useMaterialToggleMenuItemStyles();
  const { setOpened: setSidebarOpened } = useLayoutCtx();
  return (
    
      {({ location }) =&gt; {
        const paths = location.pathname.split('/');
        const lastPath = last(paths) || last(dropRight(paths));
        return (

siriwatknp / mui-treasury / website / src / components / organisms / ComponentMenuList.js View on Github

const ComponentMenuList = ({ menus, getOpenKeys }) =&gt; {
  const nestedStyles = useJupiterNestedMenuListStyles();
  const infoStyles = useMaterialInfoMenuItemStyles();
  const toggleStyles = useMaterialToggleMenuItemStyles();
  const { setOpened: setSidebarOpened } = useLayoutCtx();
  return (
    
      {({ location }) =&gt; {
        const paths = location.pathname.split('/');
        const lastPath = last(paths) || last(dropRight(paths));
        return (

siriwatknp / mui-treasury / website / src / docs / components / menuList / nested / material / MaterialNestedMenuList.js View on Github

const MaterialNestedMenuList = () =&gt; {
  const nestedStyles = useMaterialNestedMenuStyles();
  const actionToggleStyles = useMaterialActionToggleItemStyles();
  const infoStyles = useMaterialInfoMenuItemStyles();
  return (
    
       ({
          children: data.label,
          classes: actionToggleStyles,
          listItemProps: {
            className: nestedStyles.menuItem,
            classes: pick(infoStyles, ['root', 'focusVisible']),
          },

siriwatknp / mui-treasury / website / src / docs / components / menuList / nested / jupiter / JupiterNestedMenuList.js View on Github

const JupiterNestedMenuList = () =&gt; {
  const nestedStyles = useJupiterNestedMenuListStyles();
  const infoStyles = useMaterialInfoMenuItemStyles();
  const toggleStyles = useMaterialToggleMenuItemStyles();
  return (
    
       ({
          children: data.label,
          className: cx(
            toggleStyles.root,
            expanded &amp;&amp; toggleStyles.expanded,
            nestedStyles.menuItem

siriwatknp / mui-treasury / src / docs / components / card / engagement / EngagementCard.js View on Github

const EngagementCard = () =&gt; {
  const cardStyles = useStyles();
  const wideCardMediaStyles = useWideCardMediaStyles();
  const fadeShadowStyles = useFadedShadowStyles();
  const textCardContentStyles = useTextCardContent01Styles();
  return (
    
      
        classes={wideCardMediaStyles}
        image={MOCK.natureImg}
      /&gt;

siriwatknp / mui-treasury / src / docs / components / card / engagement / EngagementCard.js View on Github

const EngagementCard = () =&gt; {
  const cardStyles = useStyles();
  const wideCardMediaStyles = useWideCardMediaStyles();
  const fadeShadowStyles = useFadedShadowStyles();
  const textCardContentStyles = useTextCardContent01Styles();
  return (
    
      
        classes={wideCardMediaStyles}
        image={MOCK.natureImg}
      /&gt;

siriwatknp / mui-treasury / src / docs / components / card / engagement / EngagementCard.js View on Github

const EngagementCard = () =&gt; {
  const cardStyles = useStyles();
  const wideCardMediaStyles = useWideCardMediaStyles();
  const fadeShadowStyles = useFadedShadowStyles();
  const textCardContentStyles = useTextCardContent01Styles();
  return (
    
      
        classes={wideCardMediaStyles}
        image={MOCK.natureImg}
      /&gt;

siriwatknp / mui-treasury / src / docs / components / cardMedia / wide / WideCardMedia.js View on Github

const WideCardMedia = () =&gt; {
  const styles = useWideCardMediaStyles();
  return (
    
      // image={"src"}
      classes={styles}
    /&gt;
  );
};

siriwatknp / mui-treasury / website / src / docs / components / menuList / nested / jupiter / JupiterNestedMenuList.js View on Github

const JupiterNestedMenuList = () =&gt; {
  const nestedStyles = useJupiterNestedMenuListStyles();
  const infoStyles = useMaterialInfoMenuItemStyles();
  const toggleStyles = useMaterialToggleMenuItemStyles();
  return (
    
       ({
          children: data.label,
          className: cx(
            toggleStyles.root,
            expanded &amp;&amp; toggleStyles.expanded,
            nestedStyles.menuItem
          ),

How to use @mui-treasury/styles - 10 common examples

To help you get started, we’ve selected a few @mui-treasury/styles examples, based on popular ways it is used in public projects.

@mui-treasury/styles

Package Health Score

Popular @mui-treasury/styles functions

Similar packages