Skip to content

feat(jss-manager-react): add stylesheet overrides as props#282

Merged
chrisdholt merged 12 commits intomasterfrom
users/nirice/stylesheets-as-props
Apr 19, 2018
Merged

feat(jss-manager-react): add stylesheet overrides as props#282
chrisdholt merged 12 commits intomasterfrom
users/nirice/stylesheets-as-props

Conversation

@nicholasrice
Copy link
Copy Markdown
Contributor

closes #3, #281

chrisdholt
chrisdholt previously approved these changes Apr 19, 2018
chrisdholt
chrisdholt previously approved these changes Apr 19, 2018
@nicholasrice nicholasrice changed the title Users/nirice/stylesheets as props feat(jss-manager-react): add stylesheet overrides as props Apr 19, 2018
### Create a react component
`manageJss` is a HOC that passes as props the generated classes from a given stylesheet. The generated classes are made available on the `managedClasses` prop of the rendered component.
```jsx
// button.js
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

button.jsx or button.tsx

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

resolved

import * as React from "react";

class Button extends React.Component {
render(): {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you have a colon, do you want to say this is tsx and return JSX.Element?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

resolved

```

### Create a JSS stylesheet
You should also create a JSS stylesheet - for detailed information please reference (https://github.com/cssinjs/jss)[https://github.com/cssinjs/jss]. The JSS instance used by the manager uses (jss-preset-default)[https://github.com/cssinjs/jss-preset-default] so feel free to use any syntaxes supported by those plugins.
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually (for the cssinjs link) you don't need to re-state the link, in the () you can put some kind of nice text instead of a link, or just leave it off altogether and it should render the link with the address

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

resolved


const dynamicStyleSheet: any = rendered.state("dynamicStyleSheet");

rendered.setProps({jssStyleSheet: {dynamicStylesClass: { margin: "1" }}});
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't a margin need a qualifier like px?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

resolved

@nicholasrice nicholasrice deleted the users/nirice/stylesheets-as-props branch August 30, 2018 04:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fast-react-jss-manager needs documentation on how to use it's exports

3 participants