If you're using a built-in components like div or span and you want to allow the user to customize the styles via some props.

const MyComponent = styled('div')(({ bgColor }) => ({
  backgroundColor: bgColor,
}));

When you're using it like this:

<MyComponent bgColor='red'>

The prop is passed to the real element in the DOM tree as attribute:

And react will complain, something like:

Warning: React does not recognize the `bgColor` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `bgcolor` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

This is why shouldForwardProp exists, to prevent styling props from being passed down and create invalid attribute:

const MyComponent = styled('div', {
  shouldForwardProp: (props) => props !== 'bgColor',
})(({ bgColor }) => ({
  backgroundColor: bgColor,
}));

In a nutshell it's asking "Do you want the color, variant, and sx props that you set on instances of <MyThemeComponent /> to also be set on the underlying div element that you're styling?".

In this case, the answer is probably "no" because those three props are not valid attributes on a div. Since a styled component "forwards" any props that are passed to it to its underlying element/component by default, the shouldForwardProps function lets you filter the ones out that you don't want passed. In this case the shouldForwardProps functions says "if the props passed to me are NOT color, variant, or sx, then ("yes") put them as attributes on the div."

In this example image, you can see that I commented out your prop !== color line and the color props was passed to the underlying div, as an attribute, while variant and sx are not being passed:

Yes!

The most basic example of the above would look like this in MUI v5:

const Div = styled("div")(({ primary }) => ({
  backgroundColor: primary ? "palevioletred" : "white",
  color: primary ? "white" : "palevioletred"
}));


render(
  <section>
    <Div>Normal</Div>
    <Div primary>Primary!</Div>
  <section>
);

However, as the React docs say:

The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

So MUI gave us the shouldForwardProp option to tell MUI whether it "should forward the prop" to the root node or not. The above example would look like this using that prop:

const Div = styled("div", {
  shouldForwardProp: (prop) => prop !== "primary"
})(({ primary }) => ({
  backgroundColor: primary ? "palevioletred" : "white",
  color: primary ? "white" : "palevioletred"
}));

render(
  <section>
    <Div>Normal</Div>
    <Div primary>Primary!</Div>
  <section>
);

Explanation

The second argument to the styled function is an options object, one of the things it accepts is shouldForwardProp, which as the docs say, "Indicates whether the prop should be forwarded to the Component". So to remove the unknown prop warning from the console, we tell it not to pass our custom prop to the DOM element with shouldForwardProp: (prop) => prop !== "primary". Now we destructure this prop in the function call that returns our custom styles, and use it in those styles like we would any other function.

If you want to use the global theme styles here as well, just destructure it along with your custom prop(s), ie ({ primary, otherProp, thirdProp, theme }).

Working codesandbox.

MUI v5 styled API docs

In all the APIs that you've used here, you've used them incorrectly. I've annotated the mistakes you've made in this TS Playground link. But I'll add it here as well -

// original
const Thing = styled.div<{
  isSmallContainer: boolean;
}>(({ isSmallContainer }) => ({
  // padding: isSmallContainer ? 12 : '16px 32px',
  // The type of padding in the library is `string & {} | 0` so you can either set it to zero or a string
  padding: isSmallContainer ? "12px" : '16px 32px',
  display: 'flex',
  alignItems: 'center',
}));

const Thing2 = styled(
  'div',
  // The function takes only one argument so can't take BASE_CONFIG
  // BASE_CONFIG 
)<{
  isSmallContainer: boolean;
}>(({ isSmallContainer }) => ({
  // padding: isSmallContainer ? 12 : '16px 32px',
  // The type of padding in the library is `string & {} | 0` so you can either set it to zero or a string
  padding: isSmallContainer ? "12px" : '16px 32px',
  display: 'flex',
  alignItems: 'center',
}));

const Thing3 = styled
  .div<{
    isSmallContainer: boolean;
  }>(({ isSmallContainer }) => ({
    // padding: isSmallContainer ? 12 : '16px 32px',
    // The type of padding in the library is `string & {} | 0` so you can either set it to zero or a string
    padding: isSmallContainer ? "12px" : '16px 32px',
    display: 'flex',
    alignItems: 'center',
  }))
  // Not Supported by API
  // .withConfig(BASE_CONFIG);

const Thing4 = styled
  .div<{
    isSmallContainer: boolean;
  }>
  // .withConfig(BASE_CONFIG) Cannot call a generic
  (({ isSmallContainer }) => ({
    // padding: isSmallContainer ? 12 : '16px 32px',
    // The type of padding in the library is `string & {} | 0` so you can either set it to zero or a string
    padding: isSmallContainer ? "12px" : '16px 32px',
    display: 'flex',
    alignItems: 'center',
  }));

const Thing5 = styled("div")
// .withConfig(BASE_CONFIG) // The params are incorrect
.withConfig({ shouldForwardProp: (prop) => prop === "isSmallContainer" ? false : true })
// Already called styled with `div` argument, no need to call again
// .div<{
//   isSmallContainer: boolean;
// }>
<{isSmallContainer: boolean}>(({ isSmallContainer }) => ({
  // padding: isSmallContainer ? 12 : '16px 32px',
  // The type of padding in the library is `string & {} | 0` so you can either set it to zero or a string
  padding: isSmallContainer ? "12px" : '16px 32px',
  display: 'flex',
  alignItems: 'center',
}));

Use Transient props

TL;DR just prefix your attriibute with $ sign. example $borderColor, $black, $any, $attribute.

If you want to prevent props meant to be consumed by styled components from being passed to the underlying React node or rendered to the DOM element, you can prefix the prop name with a dollar sign ($), turning it into a transient prop.

// typescript example
const BaseButton = styled(Button)<{ $borderColor: string }>`
    border-color: ${({ $borderColor }): string => $borderColor};
`;

// js
const BaseButton = styled(Button)`
    border-color: ${({$borderColor}) => $borderColor}
`;

// usage
<BaseButton $borderColor="red">Button</BaseButton>

2nd method

Checkout shouldForwardProp

const Comp = styled('div').withConfig({
  shouldForwardProp: (prop, defaultValidatorFn) =>
      !['hidden'].includes(prop)
      && defaultValidatorFn(prop),
}).attrs({ className: 'foo' })`
  color: red;
  &.foo {
    text-decoration: underline;
  }
`;

render(
  <Comp hidden draggable="true">
    Drag Me!
  </Comp>
);