Focus on naming is very important.

Styled components as the name suggests are for styling the native DOM elements or custom components.

attrs is for mentioning the attributes of that very same DOM element in the attrs constructor without the need to even mention it in actual component call.

What above line means is you can do

 <Input placeholder="A small text input" />

with

const Input = styled.input.attrs(({ type }) => ({
  type:  type || "password"
}))`
  align-items: center;
  display: flex;
  margin: 1.5vh 0;
`

See that component usage <Input .../> doesn't have type prop anywhere. It came from your attribute constructor function(static)

You couldn't have done this otherwise in your style rules because these are just the string literal of your CSS properties.

It saved you from writing type='password' in every usage of

<Input type='password' ... />

Bonus:

Now, that's a specific input component with type attribute of password. What if you wish to have a general input (styled component) with any value of type attribute?

Tada!

const Input = styled.input.attrs(({ type }) => ({
  
  type:  type || "password",
  ...

Your type is now dynamic i.e. it will take whatever input type prop you specify from your usage of component and render the input as that type (text, password, file etc. ) or if you skip the type prop it will pick up default of password. You can use as much conditional logic as you want up there.

Example:

<Input .../> // renders type="password"
<Input type="text" .../>
<Input type="email" .../>

Hope that answers your question.

(TL;DR at the end)

The problem is that you're reading about two separate use-cases, and assuming that they are explaining the same thing.

The Styled Components .attrs method is for passing props to a styled component. When the docs say that you should use .attrs "when you want every instance of a styled component to have that prop", they mean something like this:

const CheckboxInput = styled.input.attrs({ type: "checkbox" })`
   margin: 10px;
`;

This means that when you use <CheckboxInput />, it will be a checkbox by default, no need to define the prop type="checkbox" every time. This is the main purpose of the .attrs method.

So you understand that when you add style to that component's attrs, it's exactly the same as passing style as a prop to a regular, non-styled component. It just adds that style as an inline style, skipping any optimisation that styled-components might make. Inline styles aren't usually recommended because they will always be attached as an individual style to every version of that component. Example:

// items is some array with 100 elements
items.map(item => (
  <button style={{ background: 'blue' }} >{item.text}</button>
));

This would generate 100 buttons, and each button would have their own instance of the background: blue style.

With Styled Components, you would do this:

const button = styled.button`
   background: blue;
`;

This would generate the style only once, no matter how many buttons you have. Because it actually generates a CSS class.

Unfortunately, generating CSS classes isn't a lightweight operation, so if for instance you're doing animations or doing anything that changes a style frequently, it's recommended to go with inline styles instead.

TL;DR:

• Use styled components for static styles and dynamic styles that don't change very often;
• Use inline styles (through .attrs) for styles that change frequently, like for animations.

Answer 1: Warning about fill

You need to choose a different name, maybe full, but not fill for your styled component. As fill is a standard attribute of some HTML elements. Also, at w3schools

Experiment:

If you declare fill to be string and pass it a string value, you can see a fill attribute added to you to div in HTML DOM, example:

<div
  fill="test"
  style="background-image: url(&quot;/media/images/image_file.png&quot;);" class="sc-AxiKw jDjxaQ">
</div>

fill is a property in SVGAttributes interface:

from node_modules/@types/react/index.d.ts:

interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T> {
  // Attributes which also defined in HTMLAttributes
  className?: string;
  id?: string;
  ...
  // SVG Specific attributes
  accentHeight?: number | string;
  ...
  fill?: string;
  ...
}

That's the reason of this warning:

Warning: Received `true` for a non-boolean attribute `fill`.
If you want to write it to the DOM, pass a string instead: fill="true" or fill={value.toString()}.

Answer 2: Why interface is required 2 times?

Below is the excerpt from related interface:

attrs<
      U,
      NewA extends Partial<StyledComponentPropsWithRef<C> & U> & {
          [others: string]: any;
      } = {}
  >(
      attrs: Attrs<StyledComponentPropsWithRef<C> & U, NewA, T>
  ): ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>;

U becomes : IBottleComponentProps which you pass C is HTML element or react component type

And the return type is ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>:

export interface ThemedStyledFunction<
    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
    T extends object,
    O extends object = {},
    A extends keyof any = never

where C, T were already provided. You are providing O by passing IBottleComponentProps the 2nd time.

If you don't provide it your BottleComponent will look like below one with {} for the props i.e. no props:

If you provide, it will look like below one, with the right props.

In short, you have to provide the interface 2 times for now. You can provide any if you don't have your interface defined.

'.attrs' API is not yet added in MUI v5. If you want to achieve the same behaviour, you can do this,

import { styled } from '@mui/material/styles';

export const Wrapper = styled('div')`
  display: grid;
  grid-template-areas: 'components-list forms-list field-config-editor';
  grid-template-columns: 300px 1fr 450px;
`;

Wrapper.defaultProps = {
  name: 'form-builder',
  slot: 'form-builder',
};

You can refer more about this issue here https://github.com/mui/material-ui/issues/29492