yapp 5.0.7 → 5.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -240,7 +240,7 @@ Rendering the styles in this manner should always be done before any instance of
|
|
|
240
240
|
|
|
241
241
|
### Overall styles
|
|
242
242
|
|
|
243
|
-
The following styles can be overridden.
|
|
243
|
+
The following styles can be overridden. If you are using JSX then the best way is with programmatic styles:
|
|
244
244
|
|
|
245
245
|
```
|
|
246
246
|
"use strict";
|
|
@@ -263,9 +263,41 @@ export default withStyle(Yapp)`
|
|
|
263
263
|
background-color: black;
|
|
264
264
|
font-feature-settings: initial;
|
|
265
265
|
|
|
266
|
+
`;
|
|
266
267
|
```
|
|
267
268
|
|
|
268
|
-
Now
|
|
269
|
+
Now simply import this class rather than the package's `Yapp` class.
|
|
270
|
+
|
|
271
|
+
If you are not using JSX then you can easily augment Yapp's styles by rendering a new style:
|
|
272
|
+
|
|
273
|
+
```
|
|
274
|
+
"use strict";
|
|
275
|
+
|
|
276
|
+
import withStyle from "easy-with-style"; ///
|
|
277
|
+
|
|
278
|
+
const { renderStyle } = withStyle;
|
|
279
|
+
|
|
280
|
+
renderStyle(`
|
|
281
|
+
|
|
282
|
+
.yapp {
|
|
283
|
+
border: 2px dotted;
|
|
284
|
+
|
|
285
|
+
color: green;
|
|
286
|
+
font-size: 14px;
|
|
287
|
+
line-height: 20px;
|
|
288
|
+
font-family: monospace;
|
|
289
|
+
font-weight: bold;
|
|
290
|
+
caret-color: white;
|
|
291
|
+
border-color: yellow;
|
|
292
|
+
text-rendering: initial;
|
|
293
|
+
background-color: black;
|
|
294
|
+
font-feature-settings: initial;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
`);
|
|
298
|
+
```
|
|
299
|
+
|
|
300
|
+
Note that all of the above styles will be inherited by all of the child elements with the exception of the `border` style, which is only used at the topmost level; a few other sty3es such as the `background` style, which some child elements need to override. A little experimentation is recommended.
|
|
269
301
|
|
|
270
302
|
```
|
|
271
303
|
.yaap > textarea::selection {
|