# Styled components
Styled components in Stratox allow you to add custom CSS styles directly to your components. These styles are dynamically loaded and unloaded with the component, minimizing the risk of CSS collisions and improving performance.
### Example Usage
You can utilize the `context` argument in your component to manage styles. The `context` represents the component's instance and provides access to methods like `addStyles`.
```javascript
export default function MyComponent({ props, context }) {
// Add styles to the component
context.addStyles({
'.headline-1': {
fontSize: '3rem',
},
'.custom-button': {
color: '#FFF',
fontSize: '1.5rem',
backgroundColor: 'purple',
padding: '1rem 2rem',
},
});
return `
`;
}
```
**In this example:**
* The `.headline-1` class gets a custom font size.
* The `.custom-button` class gets styled with unique colors, font size, and padding.
### Binding Styles to Components
By default, styles added with `addStyles` are scoped to the component they are defined in. If you call `addStyles` multiple times for the same component, the styles will be overwritten.
To define multiple style blocks within the same component, you can assign a unique identifier to the styles:
```javascript
// 1. Styles bound to the component
context.addStyles({
'.headline-1': {
fontSize: '3rem',
},
'.custom-button': {
color: '#FFF',
fontSize: '1.5rem',
backgroundColor: 'purple',
padding: '1rem 2rem',
},
});
// 2. Additional styles bound to the component with a unique identifier
context.addStyles({
'p': {
fontSize: '1.8rem',
},
}, 'moreStyles');
```
### **Clearing Styles**
You can dynamically clear styles during a component's lifecycle. This is particularly useful for temporary components like modals or popups.
```javascript
// Clear styles bound to the component name
context.clearStyles();
// Clear styles bound to custom name
context.clearStyles('moreStyles');
```
### Why Use Styled Components?
Styled components offer a great way to add complementary styles to your components without bloating your global CSS. They work harmoniously with popular CSS libraries like **Tailwind CSS**, **Bootstrap**, or **Sass**.
Key benefits:
* **Dynamic Loading**: Styles are loaded only when the component is active.
* **Scoped Styles**: Avoid CSS conflicts and ensure styles are isolated.
* **Performance**: Unused styles are unloaded automatically.
With Stratox styled components, you get the flexibility of CSS-in-JS while maintaining simplicity and performance in your applications.
---
# Agent Instructions: 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:
```
GET https://stratox.wazabii.se/features/styled-components.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.