Skip to main content

Style the MUI Components

Theming​

The MUI components are designed to follow the app theming https://mui.com/customization/theming/.

If your were to modify the theme, such as changing the primary colour, the Neev components will follow that scheme too.

Custom styles​

There are 2 approaches to style the components provided by the Neev packages.

Using className​

  • Every component accepts a className prop which is applied to the root of the component.
  • Additionally, every element inside a component would have a static class attached to it.

For eg. If you wish to modify some styles for the ChatInput component of @neev/ccp-react, you would do the following:

import { ChatInput } from "@neev/ccp-react";

import "styles.css";

const Hello = () => <ChatInput className="my-custom-class" />;
note

These classes can be modules as well.

styles.css
.my-custom-class {
  background-color: #f00;
}

/* Component inside ChatInput */
.my-custom-class .cpp-input {
  background-color: #0f0;
}
tip
  • To find the class names for the inner components, use inspect element in your browser.
  • Every inner class name for the @neev/ccp-react components would be prefixed with ccp-.

Using MUI classes prop​

Every MUI component used inside the @neev/ccp-react components accepts it's classes prop.

Refer to the MUI documentation for more information.

For e.g.:

The ChatInput component of @neev/ccp-react accepts these MUI classes props which are directly passed to their respective MUI components:

interface IChatInputProps {
  /** MUI classes that will be applied to Paper component */
  paperClasses?: Partial<PaperClasses>;

  /** MUI classes that will be applied to Input component */
  inputBaseClasses?: Partial<InputBaseClasses>;

  /** MUI classes that will be applied to Icon Button component */
  iconButtonClasses?: Partial<IconButtonClasses>;

  /** MUI classes that will be applied to Divider component */
  dividerClasses?: Partial<DividerClasses>;

  /** MUI classes that will be applied to Icon component */
  iconClasses?: Partial<SvgIconClasses>;
}