OnClick Event Handling On A Styled-component (DIV)

I would like to handle an onClick event on a DIV (in REACT JS) which is a styled-component actually. But this not works at all. Here is the pseudo code of my build-up:

Solution 1:

You can attach the event handlers directly without wrapper div.

index.js

import React from "react";
import { render } from "react-dom";
import Wrapper from "./Wrapper";

const App = () => <Wrapper onClick={() => alert("Hello")}>Hello</Wrapper>;

render(<App />, document.getElementById("root"));

Wrapper.js:

import styled from "styled-components";

export default styled.button`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

Code Link: https://codesandbox.io/s/styled-components-d731y?fontsize=14&hidenavigation=1&theme=dark

You also have other options like typestyle https://github.com/typestyle/typestyle, Styletron https://github.com/styletron/styletron and others as well which can be used with react.

Solution 2:

because you don't create the Styled_DIV component that'll render an tag

just add this code

const Styled_DIV = styled.div``

Share