I have my "App-component" and a "B-component" that gets rendered inside my app component. Each has its own style.
But when it gets compiled, my ComponentB.css is put before my app.css, making the ComponentB styles being overwritten by my app styles.
Why is this happening??
APP
import React, { Component } from 'react';
import ComponentB from './components/ComponentB';
import './styles/app.css';
class App extends Component {
render() {
return (
<div className="App">
<ComponentB />
</div>
);
}
}
export default App;
COMPONENT B
import React, { Component } from 'react';
import './styles/ComponentB.css';
class ComponentB extends Component {
render() {
return (
<div>
<h1>Hello from ComponentB</h1>
</div>
);
}
}
export default ComponentB;
The way you do it results in a styles conflicts(one style overwriting another style), because after React compiles your code you are still using the same selectors for the same classes.
If you want to use different css files for different components while using the same class names, you should use CSS modules.
This will make your CSS class names scoped locally by default.
Related
see example below:
import React, { Component } from 'react';
import styles from './Button.module.css';
class Button extends Component {
let classNameVariable= "error-button"
render() {
return <button className={styles.classNameVariable}>Button</button>;
}
}
as you saw above example, I need to use variable instead of className, to add className.
so is there a way to do it?
Take a look at bracket notation: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Property_Accessors
Instead of styles.clasNameVariable make it styles[classNameVariable]
My problem is the following, I created a new react project with typescript. And added a custom component that has a separate css file for it's styling. The folder structure is like this:
In the Header.css I defined a class:
.mainHeading {
color: green;
}
And referenced it in the Header.tsx like this:
import React from "react";
import styles from './Header.css';
function Header() {
return(
<h1 className={styles.mainHeading}>Streamfiuse</h1>
);
}
export default Header;
To do this I added the following to the react-app-env.d.ts
declare module '*.css';
I'm using the Header component in the App.tsx like the following
import React from 'react';
import Discover from './components/discover/Discover';
import Header from "./components/header/Header";
import './App.css';
function App() {
return (
<div className="App">
<Header />
<Discover />
</div>
);
}
export default App;
The problem is now that I would expect the heading "Streamfiuse" to appear in green, but apparently it doesn't. I'm new to react so any help is appreciated.
Edit 1
I also tried this:
import React from "react";
import './Header.css';
function Header() {
return(
<h1 className="mainHeading">Streamfiuse</h1>
);
}
export default Header;
But does't work either.
Try importing like this:
import './Header.css'
And applying the mainHeading class as a string
Maybe you could try this
Change import styles from './Header.css'; into import './Header.css';
Change className={styles.mainHeading} into className="mainHeading"
import React from "react";
import './Header.css';
function Header() {
return(
<h1 className="mainHeading">Streamfiuse</h1>
);
}
export default Header;
this is my files, in my Sidebar.js that is in the component folder, i need to import sidebar.css from styles folder, components and styles are in parent folder sidebar.
pls give me a solution
Seems, you are looking for this: import "../styles/sidebar.css" ?
Try this way
sidebar.css
import { StyleSheet, Platform } from "react-native";
export const sidebar = StyleSheet.create({});
Sidebar.js
import { sidebar } from "../styles/sidebar";
class Sidebar extends React.Component {
clickMe() {
alert("Hi!");
}
render() {
return (
<div className="box" onClick={this.clickMe.bind(this)}>
Hello {this.props.name}. Please click me.
</div>
);
}
}
Hello I'm using React to build a website and I want to use .CSS files for my CSS and I'm using import './example.css' in my component file.
Example:
import React from 'react';
import 'Home.css';
const Home = () => {
return (
<div className="example">
Hi
</div>
)
}
and if i create another page but don't import this CSS file, I get the styles on my other page
other page:
import React from 'react';
const About= () => {
return (
<div className="example">
Hi
</div>
)
}
Any reason and solution for this?
When importing a css file like you've done it will be injected into the project and not just into the component you're importing it from.
What you're looking for is css-modules (adding css-modules using create-react-app)
import React from 'react';
import styles from 'Home.css';
const Home = () => {
return (
<div className={styles.example}>
Hi
</div>
)
}
The reason is that you are using the same class in both of your components.
Doing import 'Home.css' does not encapsulate .css only for that component, all of the .css gets bundled together so it ends up overwriting styles somewhere down the line.
For each of the components, you can specify a unique className on top of your component, and use that class to style only that component.
.home-container .header { ... }
You can also make one global .css part to put styles that you want to keep using throughout the whole app.
I'm trying to use our existing CSS classes in my Stripe Elements form. According to this document https://stripe.com/docs/stripe-js/reference under section Elements options, I can pass my existing CSS classes but my code below didn't work.
const customStripeClasses = {
base: 'app-form-default input',
};
class MyPaymentForm extends Component {
render() {
return(
<div>
<CardElement classes={customStripeClasses} />
</div>
);
}
}
Basically, I'm trying to get Stripe Elements form components to use the CSS classes we created for regular HTML elements e.g. input, textarea, etc.
Any idea how I can get this to work?
As far as I can see from the docs you need to use react-stripe-elements to use stripe with react. And CardElement has no prop classes. You can pass css classes to it with className:
import React from 'react';
import {CardElement} from 'react-stripe-elements';
class CardSection extends React.Component {
render() {
return (
<div>
<CardElement className="app-form-default input" />
</div>
);
}
};