Advanced Manual

Mutate Preset

Mui Layout provides wide range of presets that reduce effort and keep your code base clean (even though it makes your code harder to understand). However, you might want to customize a closest preset to fit your need. It is pretty easy if you already know how to configure layout from these tutorials

This is how you use a standard preset from @mui-treasury/layout

import Layout, { getStandardScheme } from '@mui-treasury/layout';

const standardScheme = getStandardScheme()

const Dashboard = () => {
  return <Root scheme={standardScheme}>...</Root>;
};

Super easy, isn’t it? you can remove all of configure code and replace that with a preset. How does a preset works? Let me show you the code of standard preset.

import LayoutBuilder from "../builders"
// LayoutBuilder = Layout from @mui-treasury/layout

export default () => {
  const scheme = LayoutBuilder()

  scheme.configureHeader(builder => {
    builder
      .registerConfig("xs", {
        position: "sticky",
        initialHeight: 56,
      })
      .registerConfig("md", {
        position: "relative",
        initialHeight: 64,
        clipped: true,
      })
  })

  scheme.configureEdgeSidebar(builder => {
    builder
      .create("primarySidebar", {
        anchor: "left",
      })
      .registerTemporaryConfig("xs", {
        width: 256,
      })
      .registerPermanentConfig("sm", {
        width: 256,
        collapsible: true,
        collapsedWidth: 64,
        headerMagnetEnabled: true
      })
  })

  scheme.enableAutoCollapse("primarySidebar", "sm")

  return scheme
}

Look familiar? well, to be exact it is the same function that you see all over the documentation, lol. That means if you want to customize or even remove some of the config in a preset to fit your app, it is super straightforward.

Update existing config

Take this example, I love standard preset but I don’t want it to be collapsible in permanent config. This is how I update the config,

import Layout, { getStandardScheme } from '@mui-treasury/layout';

// ... getLayoutComponents section

const standardScheme = getStandardScheme()

standardScheme.configureEdgeSidebar(builder => {
  builder.update('primarySidebar', config => {
    config.sm.collapsible = false;
  });
});

const Dashboard = () => {
  return <Root scheme={standardScheme}>...</Root>;
};

builder.update accepts 2 params, a sidebarId and a callback fn that get the config. The config that you get from callback is a dictionary of breakpoint config that was added in preset. You can mutate the object as you like, but be careful when accessing object property.

For example, this will throw error.

presets.standard.configureEdgeSidebar(builder => {
  builder.update('primarySidebar', config => {
    config.lg.collapsible = false;
  });
});

Because there is no lg property in edgeSidebar of standard preset before. This is about javascript not mui-layout.

Override some config

coming soon!