score:0
Accepted answer
i think it is a typo:
// remove style prop or it will be converted to style={true}
<div classname="col-md-6 offset-md-3">
// use "style" prop instead of "styles"
<p style={styles.boilerplate}>some boilterplate text</p>
</div>
score:0
you can find a documentation on how to use inline css in react here.
your first choice should be to use the classname to reference classes defined in an external css stylesheet
import react, { component } from 'react';
import './startpage.module.css' //loading a css file here
class startpage extends component {
state = { }
render() {
return (
<div classname="container">
<div classname="row"> {/*row 1 - contains title*/}
<div classname="col-md-6 offset-md-3"> // remove style
<p classname='boilerplate'>some boilterplate text</p> // add boilerplate as classname
</div>
</div>
<div classname="row"> {/*row 2 - contains buttons*/}
</div>
</div>
);
}
}
export default startpage;
but if you would like to use the style attribute it works like this:
import react, { component } from 'react';
const divstyles = {
backgroundcolor: '#000000',
border: 'red dotted'
}
class startpage extends component {
state = { }
render() {
return (
<div classname="container">
<div classname="row"> {/*row 1 - contains title*/}
<div classname="col-md-6 offset-md-3">
<p style={divstyles}>some boilterplate text</p>
</div>
</div>
<div classname="row"> {/*row 2 - contains buttons*/}
</div>
</div>
);
}
}
score:1
you should use styles prop instead of style
<div style classname="col-md-6 offset-md-3">
</div>
or just remove style prop. the value is empty!
Source: stackoverflow.com
Related Query
- How to Import CSS Module React and JSX? ( Error )
- How to get around CSS error of of expanding padding on hover JSX and React
- How to import CSS modules with Typescript, React and Webpack
- How can I import an existing React component defined in JSX in a Typescript module (.tsx)
- how to solve the error that fs module is not found when used react and next.js
- Whenever I try to import material ui icons and core an error appears saying module not found? How to solve it?
- How to combine inline style and external import const style in JSX React
- how to import css file in react when generating static html and inject imported css into html head tag?
- React cannot import CSS file, and throws an error
- How to override css and import with another component in react js
- Getting Module parse failed: Unexpected token (1:0) error when I try to import css file for a specific component in react
- How to import npm module css as global with webpack and typescript?
- How to import and export components using React + ES6 + webpack?
- How to import a CSS file in a React Component
- How to define css variables in style attribute in React and typescript
- How to make React CSS import component-scoped?
- How to apply CSS and Styling to a React component
- .eslintrc.js for React 17 and JSX without import 'react'
- How to obtain ES6 module of React and ReactDOM?
- How to use vw and vh css with React Native
- How to use React Module CSS in Meteor 1.3 beta
- CDN links for React packages and how to import it when using react using the scripts from CDN
- how to access vairables outside of map function in js and jsx in a React component
- how to import HTML file into React component and use it as a component?
- how to import images via props in react and use the 'import' path
- How to properly import React JSX from separate file in Typescript 1.6
- How to fix React Native error "jest-haste-map: Haste module naming collision"?
- how to add react jsx as javascript file type in vim and enable eslinting, auto completions?
- How to import everything from a module in react using es6?
- How to load background images from css in React and NextJS
More Query from same tag
- How to update and get Circle new position after dragging using @react-google-maps/api?
- Higher-Order Components and APi of React
- React Typescript: Pass value from child to parent
- Bootstrap Navbar broke
- How to override mouse event with touch event using javascript?
- Material-ui Grid item height is exceeding the height of it's container
- How to make auth with react and node.js express
- React Ref Form onSubmit Handler not triggered
- two way binding string separated by commas
- Correct use of key property React
- React cloning fragments
- Disable dropdown if checkbox is checked in reactjs using typescript
- How to convert a raw data excel to a downloadable one?
- TypeError: room.map is not a function : ReactJS
- How to update nested array in React state?
- React - How can I reverse the order of dynamic children lists that have a key unique id
- Client-side validation THEN pass to server OR disable submit until form complete - How do I do this?
- React fetch, “credentials: include”, breaks my entire request and I get an error
- Conditional with multiple React Components in class render method
- How to update react context in child elements
- TypeError: props.articles.map is not a function in reactjs
- Only trigger UseEffect() in Material UI Dialog when it is in opened
- Rerendering mapped array based on order
- React: use or not to use Immutable.js
- useState is not updating state immediately
- React/DC.js - Chart Resizing (based on window size)
- React - How to display converted datetime?
- React State is rolling back to previous value
- ReactJS - Dynamic Component Name with closing tag and children elements
- React replace item in array