• Stars
    star
    220
  • Rank 180,422 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React Component for portable styles

react-styleable

Consistent, easy overrides for CSS Modules in React Components

Install

npm install react-styleable --save-dev

Usage

Styles in Props

react-styleable makes your styles from your CSS modules available on props.css.

Write your stylesheet with all the perks of css modules. For example:

.list {
  list-style: none;
  padding-left: 0;
  margin: 10px;
}
.item {
  outline: 1px solid red;
  padding: 10px;
}

Then in your reusable component, wrap your React.Component in react-styleable's higher-order component.

import styleable from 'react-styleable'

import css from './my-list.css'

class MyList extends React.Component {
  renderItem(item, i) {
    return (
      <li key={i} className={this.props.css.item}>{item}</li>
    )
  }
  renderList(items) {
    return items.map(this.renderItem)
  }
  render() {
    return (
      <ul className={this.props.css.list}>
        {this.renderList(this.props.items)}
      </ul>
    )
  }
}

export default styleable(css)(MyList)

Usage as a decorator is also nice:

@styleable(css)
class MyList extends React.Component { /* ... */ }

Your MyList component is now styled and ready to display!

Overriding Component Styles

This is the big payoff.

If you want to override this component's styles as the consumer, you can easily do so, through the same, consistent interface. First, define a new stylesheet:

.item {
  outline: 1px solid blue;
}

And use it to render MyList again, passing your new stylesheet via the props.css prop:

import MyList from './my-list'

import css from './client.css'

React.render(<MyList css={css} />, document.getElementById('app'))

Now the .items outline will be blue instead of the original red.

Composing Component Styles

If instead of just overriding the styles, you wanted to add to them with style composition, you can do that as well.

One method is via CSS modules' composes keyword. In your new stylesheet:

.item {
  composes: item from "./my-list.css";
  background: pink;
}

Now the original red outline will remain and a pink background will be present as well. This is the most surefire way to compose styles because it allows you to guarantee the order of the cascade.

But it has the downside of having to locate the original stylesheet location.

If you have enough assurances on the cascade order and selector specificity, all potential concerns, you can use the compose api via the react-styleable to accomplish the same thing (in [email protected]):

import MyList from './my-list'

import css from './client.css'

React.render(<MyList css={{ compose: css }} />, document.getElementById('app'))

Styled. Portable. Easily overridden. So, so good.

More Repositories

1

git-internals-pdf

PDF on Git Internals
Ruby
2,452
star
2

PSOperations

A framework for advanced NSOperations usage
Swift
651
star
3

guides

Article back-end for hack.guides() website
635
star
4

intro-to-pytest

An introduction to PyTest with lots of simple, hackable examples
Python
332
star
5

classic-design-system

This library (classic) is officially in maintenance mode only. For the latest library, please see the TVA project (https://pluralsight.github.io/tva/).
TypeScript
296
star
6

web-dev-starter

HTML
272
star
7

PS-AutoLab-Env

A PowerShell module for creating lab configurations using Lability and Desired State Configuration. This is a complete update of the 3.x versions. Look at README.md for more information.
PowerShell
261
star
8

guides-cms

DEPRECATED - Markdown based CMS with Github repository as persistent storage
Python
109
star
9

hydra

A real-time data replication platform that "unbundles" the receiving, transforming, and transport of data streams.
Scala
82
star
10

mob-timer

A mob programming application
JavaScript
62
star
11

hydra-spark

Scala
49
star
12

irt_parameter_estimation

Parameter estimation routines for logistic Item Characteristic Curves (ICC) from Item Response Theory (IRT)
Python
47
star
13

pando

🌲 The foundational roots to a better design system using Pluralsight Design.
TypeScript
46
star
14

maybe-dotnet

C#
41
star
15

pluralsight-author-contrib

Pluralsight author related materials
37
star
16

tech-blog-fastapi-demo

sample code for tech blog post "Porting Flask to FastAPI for ML Model Serving"
Python
30
star
17

htmlTagValidator

HTML Tag validator that does not rely on the DOM
JavaScript
28
star
18

spavro

Spavro is a (sp)eedier avro library -- Spavro is a fork of the official Apache AVRO python 2 implementation with the goal of greatly improving data read deserialization and write serialization performance.
Python
25
star
19

redux-react-connector

Convenient subscription to redux stores
JavaScript
24
star
20

applenotary

A CLI for synchronously notarizing macOS applications
Swift
22
star
21

tech-blog-roll-the-dice

example code for blog post "Python CLI Utilities with Poetry and Typer"
Python
11
star
22

git-collaborate

Cross-platform electron app for managing git users while pair/mob programming
JavaScript
8
star
23

intro-to-python-typing

An introduction to Python 3 type annotations, using lots of simple, hackable examples
8
star
24

Clean-Code-The-Polyglot-Edition

A collaborative attempt to translate the language-specific code examples and recommendations from Robert C. Martin's "Clean Code" into other languages.
Python
8
star
25

FocusableView

Swift
7
star
26

team-exercises

A repo containing some team training material
JavaScript
5
star
27

git-switch

This is a Windows utility that allows multiple users to share a pairing station while using their own creds for commits.
C#
5
star
28

BlackCat

Centralized reporting on GitHub dependency scanning outputs
Python
4
star
29

spark-analytics

3
star
30

ps-python-library-public

Collection of reusable python modules that are used for data processing
Python
3
star
31

pando-rfcs

RFCs for changes to any Pando related library
3
star
32

sparse_dot

Highly efficient dot products using sparse arrays (in location/data form)
Python
3
star
33

gsweet

Help with writing scripts to run against gSuite
JavaScript
2
star
34

activity-insights-vim

Vim extension for the ps-time product
Vim Script
2
star
35

hydra-notifications

A generic RESTful API to send notifications to different systems through an HTTP endpoint.
Scala
2
star
36

hydra-avro-utils

A collection of Avro utilities to facilitate the handling of streams containg Avro messages.
Scala
2
star
37

HHPS-Partner-Tutorials

Private articles repo
2
star
38

a11y-test-app

Client-side app reserved for a11y testing and validation for PSDS usage.
TypeScript
1
star
39

psqlx

A wrapper around psql that makes interacting with psql and your .pgpass files easier
PowerShell
1
star
40

Bless.Net

CSS
1
star
41

mtm_stats

Highly efficient set statistics about many-to-many relationships
Python
1
star
42

ps-wait

Wait for a condition to be met
JavaScript
1
star
43

trello-helper

Help make calls to the Trello API simple.
TypeScript
1
star
44

gcf-ts-starter-kit

A Google Cloud Function Typescript Starter Kit
JavaScript
1
star
45

env-verifier

Save yourself a headache by verifying your incoming .env variables
TypeScript
1
star
46

lessons-learned

Lessons learned using typescript and Node
TypeScript
1
star
47

pairing-station

A charming little OS X app to manage identities on a pairing station.
Objective-C
1
star
48

activity-insights-cli

The command line interface used in the Pluralsight Activity Insights dashboard. The dashboard is currently in public beta for Pluralsight users while we gather feedback.
Rust
1
star