How get refs.value in styled-component React?

styled-components hover
styled-components css prop
styled-components nested elements
styled-components classname
styled-components css variables
styled-components responsive
styled components media queries

I want get ref value of input, without styled component:

<form  role='form' method='POST' onSubmit= {::this.onSubmit}>               
<input id='name' type='text' ref='name' name='name'  required/>
<button> Register</button></form>


How get ref.value in styled-component?

  <form  role='form' method='POST' onSubmit= {::this.onSubmit}>               
<StyledInput innerRef={name => { this.input = name }} id='name' type='text' name='name' />
<button> Register</button></form>  


Adding innerRef={name => { this.input = name }} makes the input node available through this.input


You could get the value from the Event without using ref

onSubmit(e) {

More details about React forms.

Demo component:

import React from "react";
import styled from "styled-components";

const InputStyled = styled.input`
  background: lightgreen;

class Test extends React.Component {
  onChange = e => {
  render = () => {
    return (
        innerRef={input => (this.input = input)}

export default Test;

React Styled Components, Therefore, we can pass themeContext straight in as the value of the style prop. In App , we wrapped ThemeProvider with theme set to baseTheme  The rest of this post will get into refs, which is all still relevant in the what and why of refs. How to create a ref. createRef() is a new API that shipped with React 16.3. You can create a ref by calling React.createRef() and attaching a React element to it using the ref attribute on the element.

Not sure how StyledInput works with refs, but you can access a ref node with the .current key of the ref object.

How get refs.value in styled-component React? - reactjs - html, I want get ref value of input, without styled component: <form role='form' method='​POST' onSubmit= {::this.onSubmit}> <input id='name' type='text' ref='name'  Styled Components aims to solve the problem of applying CSS to Javascript frameworks on a per-component basis; and this is particularly useful with React. Although this article is primarily aimed

As of React 16.8.0. with hooks, you can access the reference in the following manner with useRef -

import React, { useRef } from 'react';


const inputRef = useRef(null);


<StyledInput ref={inputRef} />

<Button onClick={()=>{inputRef.current.focus()}}>Focus on input</Button>


const StyledInput = styled(input)`

const Button = styled(button)`

Advanced Usage, Theming, refs, Security, Existing CSS, Tagged Template Literals, Server-Side Rendering and Style Objects. This component provides a theme to all React components underneath itself via the context API. Getting the theme without styled components This value overrides the default <style> tag attribute, data-​styled  I noticed the styled-components documentation recommended using their babel plugin to make debugging easier and support server-side rendering, but it wasn't clear how to get that working with a React application built with Create React App. Here's how I did that.

[Question] How to use "ref" to access the DOM when using styled , The <Input /> is a component made with styled-component v2. I have the following code in the Component : componentDidUpdate() { if (this. As you can see, styled-components lets you write actual CSS in your JavaScript. This means you can use all the features of CSS you use and love, including (but by far not limited to) media queries, all pseudo-selectors, nesting, etc.

refs are attached to the styled components wrapper · Issue #102 , Add `innerRef` to get ref to inner DOM node #122 React `ref` doesn't work with dynamically imported components vercel/next.js#2842. Let's get started! Using inline styles in JSX. Let's start with inline styles. Inline styles are used when a single HTML element needs unique styles. Whenever there is more than one element with that exact same style, it is advised to use CSS classes instead. Inline styles are not react specific They are a regular HTML feature:

Refs and the DOM – React, Your first inclination may be to use refs to “make things happen” in your app. Refs are commonly assigned to an instance property when a component is constructed so The value of the ref differs depending on the type of the node: Passing Functions to Components · Component State · Styling and CSS · File Structure  styled-components is a library for React and React Native that allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSS. We’ve been using…