# Styled Components > This is a **web-specific** API and you **won't** be able to use it in react-native. ## Pages - [Components As Selectors](advanced-components-as-selectors.md): This is a **web-specific** API and you **won't** be able to use it in react-native. - [Existing Css](advanced-existing-css.md): There are a couple of implementation details that you should be aware of, if you choose to use - [Refs](advanced-refs.md): Passing a`ref`prop to a styled component will give you one of two things depending on the styled target: - [Security](advanced-security.md): Since styled-components allows you to use arbitrary input as interpolations, you must be - [Server Side Rendering](advanced-server-side-rendering.md): styled-components supports concurrent server side rendering, with stylesheet rehydration. - [Style Objects](advanced-style-objects.md): styled-components optionally supports writing CSS as JavaScript objects instead of strings. This is particularly usef... - [Tagged Template Literals](advanced-tagged-template-literals.md): Tagged Template Literals are a new feature in ES6. They let you define custom string interpolation rules, - [Theming](advanced-theming.md): styled-components has full theming support by exporting a``wrapper component. - [Create Global Style](api-helpers-create-global-style.md): import Code from 'components/Code' - [Css](api-helpers-css.md): import Code from 'components/Code' - [Index](api-helpers.md): import CSS from './css.mdx' - [Is Styled Component](api-helpers-is-styled-component.md): import Code from 'components/Code' - [Keyframes](api-helpers-keyframes.md): import Code from 'components/Code' - [Style Sheet Manager](api-helpers-style-sheet-manager.md): import Table, { Row, Column } from 'components/Table' - [Theme Consumer](api-helpers-theme-consumer.md): This is the ["consumer" component](https://reactjs.org/docs/context.html#consumer) created by`React.createContext`a... - [Use Theme](api-helpers-use-theme.md): This is a custom hook to get the current theme from a`ThemeProvider`. - [With Theme](api-helpers-with-theme.md): import Code from 'components/Code' - [Extend](api-old-extend.md): import Code from 'components/Code' - [Index](api-old.md): import Extend from './extend.mdx' - [Inject Global](api-old-inject-global.md): import Code from 'components/Code' - [Inner Ref](api-old-inner-ref.md): The`"innerRef"`prop was removed in styled-components v4 in favor of the [React 16`forwardRef`API](https://reactjs... - [With Component](api-old-with-component.md): import Code from 'components/Code' - [Css Prop](api-primary-css-prop.md): Sometimes you don't want to create an extra component just to apply a bit of styling. The`css`prop is a convenient ... - [Index](api-primary.md): import Styled from './styled.mdx' - [Styled Component](api-primary-styled-component.md): import Code from 'components/Code' - [Styled](api-primary-styled.md): import Code from 'components/Code' - [Tagged Template Literal](api-primary-tagged-template-literal.md): import Code from 'components/Code' - [Theme Provider](api-primary-theme-provider.md): import Table, { Row, Column } from 'components/Table' - [Supported Css](api-supported-css.md): Within a styled component, we support all of CSS plus nesting. Since we generate an - [Enzyme Find](api-test-utils-enzyme-find.md): A convenience method for finding instances of a particular styled component within an enzyme wrapper. - [Find All](api-test-utils-find-all.md): A convenience method to find all instances of a styled component's rendered DOM node within a given DOM root. - [Find](api-test-utils-find.md): A convenience method to find a single instance of a styled component's rendered DOM node within a given DOM root. - [Index](api-test-utils.md): import Find from './find.mdx' - [Typescript](api-typescript.md): styled-components provides TypeScript definitions which empowers the editing experience in IDEs and increases type sa... - [Adapting Based On Props](basics-adapting-based-on-props.md): import Code from '../../components/Code' - [Animations](basics-animations.md): CSS animations with`@keyframes`aren't scoped to a single component but you still don't want them to be global to av... - [Attaching Additional Props](basics-attaching-additional-props.md): To avoid unnecessary wrappers that just pass on some props to the rendered component or element, you can use the [`.a... - [Coming From Css](basics-coming-from-css.md): If you're familiar with importing CSS into your components (e.g. like CSSModules) you'll be used to doing something l... - [Extending Styles](basics-extending-styles.md): Quite frequently you might want to use a component, but change it slightly for a single case. Now, you could pass in ... - [Getting Started](basics-getting-started.md): `styled-components`utilises tagged template literals to style your components. - [with npm](basics-installation.md): Installing styled-components only takes a single command and you're ready to roll: - [Motivation](basics-motivation.md): **styled-components is the result of wondering how we could enhance CSS for styling React component systems.** By foc... - [Passed Props](basics-passed-props.md): If the styled target is a simple element (e.g.`styled.div`), styled-components passes through any known HTML attribu... - [React Native](basics-react-native.md): styled-components can be used with React Native in the same way and with the - [Styling Any Component](basics-styling-any-component.md): The`styled`method works perfectly on all of your own or any third-party component, as long as they attach the passe... - [Browser Support](faqs-browser-support.md): styled-components supports the same set of browsers as the current React version. - [Create React App](faqs-create-react-app.md): The basic functionality of the library should work out of the box like any other library. - [Declare Components In Render Method](faqs-declare-components-in-render-method.md): By declaring a styled component inside the render method of a react component, you are dynamically creating a new com... - [Dom Two Classes](faqs-dom-two-classes.md): Each node actually has two classes connected to it: one is static per component, meaning each element of a styled com... - [Duplicated Styled Components](faqs-duplicated-styled-components.md): If you are seeing a warning message in the console like the one below, you probably - [Flickering Text](faqs-flickering-text.md): When using global styling APIs like [`createGlobalStyle`](/docs/api#createglobalstyle) or the former [`injectGlobal`]... - [Html Attribute Warnings](faqs-html-attribute-warnings.md): The warning message below indicates that non-standard attributes are being attached to - [Library Authors](faqs-library-authors.md): If you are a library author, we recommend that you should not bundle and ship`styled-components`module with your li... - [Migration V4](faqs-migration-v4.md): This is a pretty big release with lots of changes both under the hood and at the API level. As the beta progresses, w... - [Migration V5](faqs-migration-v5.md): Ready for this? - [Migration V6](faqs-migration-v6.md): First, let's start by updating the necessary packages to their latest versions. - [Missing Native Import](faqs-missing-native-import.md): If you're getting the error message: - [Nesting](faqs-nesting.md): Yes: nesting is a feature intentionally ported from Sass. Used sparingly it's a - [Npm Link](faqs-npm-link.md): Local linking can be a useful tool to co-develop projects simultaneously. However, it creates chaotic situations with... - [Override Inline Styles](faqs-override-inline-styles.md): Inline styles will always take precedence over external CSS, so you cannot override it by simply increasing specificity. - [Override Styles With Higher Specificity](faqs-override-styles-with-higher-specificity.md): The way to override styles with a high specificity is to simply increase the specificity of your own styles. This cou... - [Reverse Selectors](faqs-reverse-selectors.md): Yes! This lets you adopt the "component selector" pattern, which lets components encapsulate the entirety of their st... - [Support For Css Frameworks](faqs-support-for-css-frameworks.md): Integrating an existing CSS framework with styled-components is really easy! You can use its existing class names alo... - [When To Use Attrs](faqs-when-to-use-attrs.md): You can pass in attributes to styled components using [attrs](/docs/basics#attaching-additional-props), but it is not... - [Getting started](homepage-getting-started.md): import { Content } from 'components/Layout' - [Babel Macro](tooling-babel-macro.md): This functionality was removed in v6.1 due to lack of usage and unnecessary bloat for other consumers. [More info](ht... - [Babel Plugin](tooling-babel-plugin.md): This plugin adds support for server-side rendering, minification of styles, and a nicer debugging experience. - [Jest](tooling-jest.md): [Jest Styled Components](https://github.com/styled-components/jest-styled-components) is a set of utilities for testi... - [Styled Theming](tooling-styled-theming.md): import StyledThemingExample from './styled-theming-example' - [Stylelint](tooling-stylelint.md): Lint your [styled components](https://github.com/styled-components/styled-components) with [stylelint](http://styleli... - [Swc Plugin](tooling-swc-plugin.md): This plugin adds support for server-side rendering, minification of styles, and better debugging experience when usin... - [Syntax Highlighting](tooling-syntax-highlighting.md): The one thing you used to lose when writing CSS in template literals is syntax highlighting. We're working hard on ma... - [Typescript Plugin](tooling-typescript-plugin.md): [`typescript-plugin-styled-components`](https://github.com/Igorbek/typescript-plugin-styled-components) is a plugin f...