Skip to main content

​
Overview

The Natura Design System provides multiple approaches for styling components, from simple inline styles to advanced theme-based solutions using hooks and utilities.

​
Styling Approaches

makeStyles

Create component styles with theme support

createStyles

Type-safe style object creation

useTheme

Access theme tokens in components

Inline Styles

Simple style prop usage

​
makeStyles Hook

The makeStyles hook creates a hook that returns class names based on your styles. 
import { makeStyles } from '@naturacosmeticos/natds-web';

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.primary.main,
    padding: theme.spacing(2),
    borderRadius: theme.shape.borderRadius,
  },
  title: {
    color: theme.palette.primary.contrastText,
    fontSize: theme.typography.h6.fontSize,
  },
}));

function MyComponent() {
  const classes = useStyles();
  
  return (
    <div className={classes.root}>
      <h2 className={classes.title}>Styled Component</h2>
    </div>
  );
}

​
Dynamic Styles with Props

const useStyles = makeStyles((theme) => ({
  button: {
    backgroundColor: (props: { primary: boolean }) =>
      props.primary ? theme.palette.primary.main : theme.palette.grey[300],
    color: (props) =>
      props.primary ? theme.palette.primary.contrastText : theme.palette.text.primary,
    padding: theme.spacing(1, 3),
  },
}));

function StyledButton({ primary }: { primary: boolean }) {
  const classes = useStyles({ primary });
  return <button className={classes.button}>Click me</button>;
}

​
createStyles Utility

Use createStyles for type-safe style definitions with Material-UI. 
import { makeStyles, createStyles } from '@naturacosmeticos/natds-web';

const useStyles = makeStyles((theme) =>
  createStyles({
    card: {
      padding: theme.spacing(3),
      margin: theme.spacing(2),
      borderRadius: theme.shape.borderRadius * 2,
    },
    header: {
      marginBottom: theme.spacing(2),
    },
  })
);

​
Accessing Theme Values

Use the useTheme hook to access theme tokens directly in your components. 
import { useTheme } from '@naturacosmeticos/natds-web';

function ThemedComponent() {
  const theme = useTheme();
  
  return (
    <div
      style={{
        backgroundColor: theme.palette.background.paper,
        padding: theme.spacing(2),
        color: theme.palette.text.primary,
      }}
    >
      Content
    </div>
  );
}

​
Inline Styles

For simple cases, use the style prop directly: 
import { Button } from '@naturacosmeticos/natds-web';

function MyButton() {
  return (
    <Button
      style={{
        marginTop: 16,
        minWidth: 200,
      }}
    >
      Styled Button
    </Button>
  );
}
Inline styles have higher specificity and don’t benefit from theme consistency. Use sparingly.

​
Responsive Styling

Use theme breakpoints for responsive designs: 
const useStyles = makeStyles((theme) => ({
  container: {
    padding: theme.spacing(2),
    [theme.breakpoints.up('md')]: {
      padding: theme.spacing(4),
    },
    [theme.breakpoints.up('lg')]: {
      padding: theme.spacing(6),
    },
  },
}));

​
Theme Tokens

The theme provides consistent design tokens:

​
Colors

theme.palette.primary.main
theme.palette.secondary.main
theme.palette.error.main
theme.palette.text.primary
theme.palette.background.default

​
Spacing

theme.spacing(1)  // 8px
theme.spacing(2)  // 16px
theme.spacing(3)  // 24px

​
Typography

theme.typography.h1
theme.typography.h6
theme.typography.body1
theme.typography.button

​
Breakpoints

theme.breakpoints.up('sm')   // ≥600px
theme.breakpoints.up('md')   // ≥960px
theme.breakpoints.up('lg')   // ≥1280px
theme.breakpoints.up('xl')   // ≥1920px

​
Best Practices

Always use theme tokens instead of hard-coded values to ensure consistency across brands and themes.
// Good
padding: theme.spacing(2)

// Avoid
padding: '16px'
Prefer makeStyles or component props over inline styles for better performance and maintainability.
Define styles near the component that uses them for better code organization.
Use createStyles for type safety when working with complex style objects.

​
Related Documentation

makeStyles API

Detailed API reference

createStyles API

Type-safe styling utility

useTheme Hook

Access theme tokens

Theme Provider

Configure theming

Build docs developers (and LLMs) love

Get started for freeTalk to us