score:0
as far as i know, there's no way to do it exactly the way vue does it, but there are plenty of libraries for doing this kind of thing, which gives you lots of choice for however you prefer to work. my personal recommendation is emotion.
score:0
you can use css modules with the webpack css-loader.
it will scope your css by adding a unique hash in the name of your css classes.
for exemple if you have a componenta with a style definition in a file named stylesa.css and a componentb with a style definition in a file named stylesb.css like:
import * as react from 'react'
const stylesa = require('./stylesa.css')
const stylesb = require('./stylesb.css')
class componenta extends react.component {
render <div classname={stylesa.container}>
}
class componentb extends react.component {
render <div classname={stylesb.container}>
}
class main extends react.component {
render <div>
<componenta />
<componentb />
</div>
}
your html file will result as
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="app">
<div class="container-[hash for a]">
</div>
<div class="container-[different hash for b]">
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>
score:0
for anyone that stumbles upon this...
coming from vue, i faced this issue as well. i was able to device a flexible scoped styling structure for each component
consider the below.
const useownstyles = () => ({
hero: {
backgroundcolor: "red",
height: "300px",
},
// add more classes
});
const home = () => {
const classes = useownstyles();
return (
<div style={classes.hero}>
<div>my section</div>
</div>
);
}
export default home;
score:1
there's nothing like that in react. 3 common ways to style:
- import a css file then use
classname
like normal html => nothing have to learn, just add animport
and you ready to go. - css-in-js libraries. i prefer
styled-component
- it's awesome. - inline style
score:8
https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet
button.module.css
.error {
background-color: red;
}
another-stylesheet.css
.error {
color: red;
}
button.js
import react, { component } from 'react';
import styles from './button.module.css'; // import css modules stylesheet as styles
import './another-stylesheet.css'; // import regular stylesheet
class button extends component {
render() {
// reference as a js object
return <button classname={styles.error}>error button</button>;
}
}
result: no clashes from other .error class names
<!-- this button has red background but not red text -->
<button class="button_error_ax7yz">error button</button>
score:14
every answer here is about css modules, but scoped styles in vue works another way.
here the library for react that works like <style scoped>
in vue: https://github.com/gaoxiaoliangz/react-scoped-css
input:
import react from 'react'
import './title.scoped.css'
const title = props => {
return (
<h1 classname="title">
<p>{props.children}</p>
</h1>
)
}
export default title
output:
<h1 class="title" data-v-hi7yyhx>
.title[data-v-hi7yyhx] {}
Source: stackoverflow.com
Related Query
- How to add scoped css in react?
- How to add !important into React inline CSS style
- how to add dynamic css in react js
- How to add a CSS class to an element on click - React
- How to dynamically add css style to pseudo classes in React
- React Styled component: how to add css styles based on props?
- How to add a CSS class to an element with React function components
- how to add custom css using react styled component
- How to add css class based on function in React / Next js?
- How to add a ternary operator in css in js with react spring
- How can I add external CSS & JS files to my react component
- How to add another className in react if I use CSS Modules?
- How to add CSS new 'content-visibility' property to a React class component that uses Typescript and SCSS?
- how to add background-clip property using css in js using react material ui
- How to add css to template literals in ES6 with react
- How do you correctly add a CSS class to a react component (with broken example)?
- How to add CSS server side render for React Next app with Material-ui
- How do I add a CSS property React components used inside another parent component?
- How to add css propety only variable is. true ? React
- How to add an image in React js in css
- How do I conditionally add attributes to React components?
- How to import a CSS file in a React Component
- How to apply global styles with CSS modules in a react app?
- How to define css variables in style attribute in React and typescript
- How to make React CSS import component-scoped?
- How do I add validation to the form in my React component?
- How to import CSS modules with Typescript, React and Webpack
- How do I use external script that I add to react JS?
- How to add SCSS styles to a React project?
- How to CSS display:none within conditional with React JSX?
More Query from same tag
- Properties background image not working [React]
- Unexpected token '.' when run create-react-app
- configure React (build) routes.js with Django urls.py
- setState/use State in external function react
- How to statically type a string property within a React component using Typescript
- How to make OnClick events for points in a React Chart JS?
- componentDidUpdate prevProps gives me current / new props
- Set the data in React Context from asynchronous API call
- Axios global interceptor for token refresh
- Conditional Rendering Redux and React
- CraftCMS Gatsby project throwing error "GraphQL Error Expected type [String], found {eq: $slug}."
- Redux: Using Spread Operator on 2D array
- Creating a createSelector in Redux that does not rerender unrelated components
- How to pass object with known fields as props in react
- Executing JavaScript client written code on server side of an application
- nested lists using map firing multiple onClick event listeners
- How to change background-color of menu when item is selected?
- Disable swiping after last slide in react-slick
- How to get the row index of a clicked cell in react-table?
- ReactJS - Cannot read property 'updateNumber' of undefined"
- React Enzyme test: could not find react-redux context value; please ensure the component is wrapped in a <Provider>
- Invalid prop `selectRow` of type `string` supplied to `BootstrapTable`, expected `object`
- React Carousal renders transparent images with a black background
- React: Inserting a child into an already-rendered parent
- How to access a property of an object which is inside a array assigned to a property of another object?
- Navigation from component to another componet
- Simulating a click on dynamically rendered React element
- How can I require at least one checkbox to be selected for user to submit form?
- Fetching single item vs fetching multiple items with Redux
- change datetime field to return unix timestamp in django rest framework