> For the complete documentation index, see [llms.txt](https://struct.gitbook.io/struct/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://struct.gitbook.io/struct/comercial-develop/execucao/front-end/react-js/estilizando.md).

# Estilizando

Na Struct, usamos a biblioteca `styled-components` para estilizar nossos componentes. Para instalar, basta rodar no projeto:

```bash
yarn add styled-components
```

{% hint style="info" %}
Como material de referência, podendo até editar: <https://codesandbox.io/s/styled-components-demo-5ir4oo>
{% endhint %}

O styled-components nos fornece algumas ferramentas para criar componentes estilizados. Se o componente for uma simples tag HTML estilizada, podemos colocar o estilo diretamente no `index.js` do componente. Quando mais complexo, separamos os estilos no `styles.js`, e usamos eles no index.

```js
// src/components/button/index.js
import styled from "styled-components";

const Button = styled.button`
	background-color: red;
	font-size: 1.75rem;
`;
```

{% hint style="info" %}
Para adicionar sintaxe de css e aparência mais bonita, ao invés de ficar o laranja de string, adicionar alguma extensão. No vscode, existe a extensão "styled-components" para tal.
{% endhint %}

Podemos também passar propriedades para customizar o estilo. Por exemplo, se o botão na verdade for:

```js
const Button = styled.button`
	background-color: ${(props) => props.backgroundColor};
	font-size: 1.75rem;
`;
```

{% hint style="info" %}
É boa prática deixar algum valor padrão a ser utilizado caso não seja passado a prop:

`${(props) => props.backgroundColor || "red"}`
{% endhint %}

Podemos chamar um botão da cor que quisermos, mantendo os outros estilos:

```js
<Button backgroundColor="cyan">Clique aqui</Button>
```

O bloco acima retorna um botão com cor de fundo "cyan".

Saiba mais em: <https://styled-components.com/docs/basics#getting-started>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://struct.gitbook.io/struct/comercial-develop/execucao/front-end/react-js/estilizando.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.