kylefang/styled-components
1
0
Fork 0
mirror of https://github.com/zhigang1992/styled-components.git synced 2026-04-28 17:25:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup according to review

Browse Source
This commit is contained in:
Max
2016-10-17 11:28:05 +02:00
parent 792025a3c8
commit 592e3029a0
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -223,7 +223,7 @@ const StyledLink = styled(Link)`
</a>
</div>
> **Note:** `styled-components` generates a real stylesheet with classes. It attaches those classes to styled components via the `className` prop. If a third-party (or any non-styled react component really) isn't styleable with the `styled(MyComponent)` notation, it's likely because that component does not attach the passed-in `className` prop to a DOM node! (see the ["Using `styled-components` with existing CSS"](./docs/existing-css.md)) doc for more information!)
> **Note:** `styled-components` generate a real stylesheet with classes. The class names are then passed to the react component (including third party components) via the `className` prop. For the styles to be applied, third-party components must attach the passed-in `className` prop to a DOM node. See [Using `styled-components` with existing CSS](./docs/existing-css.md) for more information!
### Animations

6
docs/existing-css.md
View File

@@ -1,10 +1,10 @@
# Using `styled-components` with existing CSS
`styled-components` generates an actual stylesheet with classes, and attaches those classes to the DOM nodes of styled components via the `className` prop. It injects the generated stylesheet at the end of the HEAD of the document.
`styled-components` generate an actual stylesheet with classes, and attaches those classes to the DOM nodes of styled components via the `className` prop. It injects the generated stylesheet at the end of the HEAD of the document.
## Styling normal React components
If you use the `styled(MyNormalComponent)` notation with an existing, non-styled-components react component that doesn't use the passed-in `className` prop the styles won't be applied.
If you use the `styled(MyNormalComponent)` notation and `MyNormalComponent` does not render the passed-in `className` prop the styles will **not** be applied.
To avoid this issue, make sure your component (in this case `MyNormalComponent`) attaches the passed-in `className` to a DOM node:
@@ -35,7 +35,7 @@ class MyNormalComponent extends React.Component {
## Global class always overridden
The other way around might happen too. You have a styled component, and a standard, global CSS class you're trying to override some styles with. For some reason though, the `styled-components` styles always end up overriding the styles of the global class, no matter what you do!
You can apply a global CSS class to a styled component by adding a `className` prop. This will work, but if a specific CSS property (e.g. `background-color`) is defined in both the global CSS _and_ the styled component the results may not be what your expecting!
A contrived example: