CODEWITHSUNDEEP
reactjsstyling
meds
meds

Reputation: 22966

How to write inline styles for html tags in React?

I want to set a header tags styling froma top level component, something like this:

 <div style={{
        ['h2']: {
            backgroundColor: 'red'
        }
    }}>
        <h2>test</h2>
    </div>

Where 'test' would have a red background, I can't do this any other way as in my use case I get a JSX Element as a variable that contains a h2 element, I cannot emphasise enough the top example with is overly simplified and I cannot access the h2 tag in any obvious way in the real use case where I have to do something like {props.children}

Upvotes: 0

Views: 6987

Answers (5)

Vincenzo
Vincenzo

Reputation: 433

You can also write inline style inside helmet. This requires you to install react-helmet and the result will be placed in the header of the html



class Application extends React.Component {
  render () {
    return (
        <div className="application">

         <Helmet>
  
           {/* inline style elements */}
             <style type="text/css">{`
               body {
                background-color: blue;
               }
   
              p {
               font-size: 12px;
               }
              `}</style>
          </Helmet>

            <h2>test</h2>
        </div>
    );
  }

Upvotes: 0

Anthony Gies
Anthony Gies

Reputation: 11

You can use styled-components and create a component from a style component and update style on it like this :

import styled from 'styled-components';

const H2 = styled.h2({
    fontSize: '1.5rem',
    fontWeight: 'bold'
});

const Test = () => {


    return (<><H2>Mon titre stylé</H2></>)
}
export default Test;

Upvotes: 0

tarzen chugh
tarzen chugh

Reputation: 11257

You could even use styled components - this gives you more flexibility.

import React from "react";
import ReactDOM from "react-dom";
import styled from 'styled-components';

const Div = styled.div`
 background-color: red
`;


const App = () => (
  <Div>
    <h2>Test</h2>
  </Div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Upvotes: 2

gazdagergo
gazdagergo

Reputation: 6721

Use styled component and h2 selector in style definition. So this gonna render a div which divs' h2 children gonna have red bg.

const styled = styled.default; // = import styled from 'styled-components';

const Div = styled.div`
  h2 {background: red};
`;

const App = () => (
  <Div>
    <h2>test</h2>
    <p>Paragraph child is not redish</p>
  </Div>
)

ReactDOM.render(<App />,  document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/styled-components.js"></script>
<div id="root"></div>

Upvotes: 1

Yue Hu
Yue Hu

Reputation: 9

it is only write inline style in tag style. you should use className like this:

.content>h2{
   backgroundColor: 'red'
}
<div className="content">
  <h2>test</h2>
</div>

Upvotes: 0

Related Questions