0
# Style Components
1

2
React components for rendering CSS rules and managing global styles within Radium applications.
3

4
## Capabilities
5

6
### Style Component
7

8
Renders CSS rules as an HTML `<style>` element with automatic vendor prefixing and optional scoping.
9

10
```javascript { .api }
11
/**
12
 * Component that renders CSS rules as a style element
13
 */
14
const Style: React.ComponentType<StyleProps>;
15

16
interface StyleProps {
17
  /** CSS rules object to render */
18
  rules: { [selector: string]: object | { [mediaQuery: string]: object } };
19
  /** Optional selector to scope all CSS rules */
20
  scopeSelector?: string;
21
  /** Optional Radium configuration */
22
  radiumConfig?: RadiumConfig;
23
}
24
```
25

26
**Usage Examples:**
27

28
```javascript
29
import { Style } from 'radium';
30

31
// Basic CSS rules
32
<Style rules={{
33
  body: {
34
    margin: 0,
35
    fontFamily: 'Helvetica Neue, Arial, sans-serif'
36
  },
37
  'h1, h2, h3': {
38
    fontWeight: 'bold'
39
  }
40
}} />
41

42
// With media queries
43
<Style rules={{
44
  '.container': {
45
    padding: '1rem'
46
  },
47
  mediaQueries: {
48
    '(min-width: 768px)': {
49
      '.container': {
50
        padding: '2rem'
51
      }
52
    }
53
  }
54
}} />
55

56
// With scoping
57
<div className="my-component">
58
  <Style
59
    scopeSelector=".my-component"
60
    rules={{
61
      h1: { fontSize: '2em' },
62
      p: { lineHeight: 1.5 }
63
    }}
64
  />
65
</div>
66
```
67

68
### StyleRoot Component
69

70
Root wrapper component that manages global styles and provides necessary context for keyframes and media queries.
71

72
```javascript { .api }
73
/**
74
 * Root component for managing global Radium styles
75
 * Must wrap components that use keyframes or media queries
76
 */
77
const StyleRoot: React.ComponentType<StyleRootProps>;
78

79
interface StyleRootProps {
80
  /** Child components */
81
  children: React.ReactNode;
82
  /** Optional Radium configuration */
83
  radiumConfig?: RadiumConfig;
84
  /** All other div props are forwarded */
85
  [key: string]: any;
86
}
87
```
88

89
**Usage Examples:**
90

91
```javascript
92
import { StyleRoot } from 'radium';
93

94
// Basic usage
95
function App() {
96
  return (
97
    <StyleRoot>
98
      <Header />
99
      <Main />
100
      <Footer />
101
    </StyleRoot>
102
  );
103
}
104

105
// With configuration
106
<StyleRoot radiumConfig={{ userAgent: 'custom-agent' }}>
107
  <MyApp />
108
</StyleRoot>
109

110
// With additional props (forwarded to div)
111
<StyleRoot className="app-root" style={{ minHeight: '100vh' }}>
112
  <MyApp />
113
</StyleRoot>
114
```
115

116
### Style Object Format
117

118
The `rules` prop accepts CSS rules in JavaScript object format with special handling for media queries.
119

120
```javascript { .api }
121
interface StyleRules {
122
  /** Regular CSS selectors */
123
  [selector: string]: CSSProperties | MediaQueryRules;
124
  /** Special media queries object */
125
  mediaQueries?: {
126
    [query: string]: StyleRules;
127
  };
128
}
129

130
interface CSSProperties {
131
  [property: string]: string | number;
132
}
133

134
interface MediaQueryRules {
135
  [selector: string]: CSSProperties;
136
}
137
```
138

139
**Usage Examples:**
140

141
```javascript
142
const complexRules = {
143
  // Regular styles
144
  '.button': {
145
    padding: '0.5rem 1rem',
146
    border: 'none',
147
    borderRadius: '4px',
148
    cursor: 'pointer'
149
  },
150
  
151
  // Multiple selectors
152
  'h1, h2, h3': {
153
    fontFamily: 'Arial, sans-serif',
154
    margin: '0 0 1rem 0'
155
  },
156
  
157
  // Media queries
158
  mediaQueries: {
159
    '(min-width: 768px)': {
160
      '.button': {
161
        padding: '0.75rem 1.5rem'
162
      }
163
    },
164
    '(prefers-color-scheme: dark)': {
165
      '.button': {
166
        backgroundColor: '#333',
167
        color: '#fff'
168
      }
169
    }
170
  }
171
};
172
```
173

174
## Context Integration
175

176
StyleRoot provides context that other Radium components depend on for proper functionality.
177

178
```javascript { .api }
179
interface StyleKeeperContext {
180
  /** Internal style keeper instance */
181
  styleKeeper: StyleKeeper;
182
}
183

184
interface RadiumConfigContext {
185
  /** Configuration passed down through context */
186
  config: RadiumConfig;
187
}
188
```
189

190
## Important Notes
191

192
### StyleRoot Requirements
193

194
- Required for components using keyframes animations
195
- Required for components using media queries
196
- Must not be used directly on elements with media queries or keyframes - wrap in separate components instead
197

198
```javascript
199
// ❌ This doesn't work
200
<StyleRoot>
201
  <div style={{'@media print': {color: 'black'}}} />
202
</StyleRoot>
203

204
// ✅ This works
205
const PrintableDiv = () => (
206
  <div style={{'@media print': {color: 'black'}}} />
207
);
208

209
<StyleRoot>
210
  <PrintableDiv />
211
</StyleRoot>
212
```
213

214
### Style Content Handling
215

216
For properties like `content` that require quoted strings, you must add explicit quotes:
217

218
```javascript
219
const rules = {
220
  '.tooltip::after': {
221
    content: "'Tooltip text'"  // Note the extra quotes
222
  }
223
};
224
```
225

226
## Types
227

228
```javascript { .api }
229
interface StyleProps {
230
  rules: StyleRules;
231
  scopeSelector?: string;
232
  radiumConfig?: RadiumConfig;
233
}
234

235
interface StyleRootProps {
236
  children: React.ReactNode;
237
  radiumConfig?: RadiumConfig;
238
  [key: string]: any;
239
}
240

241
interface StyleRules {
242
  [selector: string]: CSSProperties | MediaQueryRules;
243
  mediaQueries?: {
244
    [query: string]: StyleRules;
245
  };
246
}
247
```