I am creating a ReactJs app, and am trying to apply styles. I load styles in the normal way (without webpack css modules):
import React, {Component} from 'react';
//styles
import './Header.css';
class Header extends Component {
render() {
return(
<div className='header'>
<h1>Save</h1>
</div>
);
}
}
The styles that I have for the header class apply, and everything is groovy. But for about 50% of my ReactJs files and their subsequent CSS files, the class styles do not apply. There is no error either, it finds the CSS and just doesn't apply the styles on some of the files.
I have no idea what is wrong, thanks!
EDIT 1
The header.css file:
.header {
width: 100%;
top: 0;
left:0;
text-align: right;
height: 100px;
margin: 0 auto;
}
.header h1 {
margin: 0;
margin-right: 40px;
cursor: pointer;
}
Edit 2
Example of class whose styles don't apply
Matrix.js:
import './Matrix.css';
render() {
const {users, selectedDivision} = this.state;
return(
<div className='container' style={{display:'grid', gridTemplateColumns:'200px 1fr'}}>
<div style={{textAlign: 'left'}}>
<input type='text' placeholder="Search Divisions" onChange={(e)=>this.search(e)} className='searchDivs'/>
<Scroller divisions={this.state.displayDivisions} handleSelectedDivisionChange={this.handleSelectedDivisionChange.bind(this)} />
</div>
<div style={{marginLeft: '10px'}}>
<Division division={selectedDivision} users={users} addToParentDivisions={this.handleNewUserAddedToDivision.bind(this)}/>
</div>
</div>
);
}
Here my work around has been to use inline styles but I want to try to avoid this as a best practice
Edit 3
Looking at dev tools in Chrome it shows that my css is not loaded because they are invalid property values?
So React is loading in the styles, but just refusing to display because they are invalid?
Just had the exact same problem!
Solution: Remove quotation marks (") around your property values.
Inline styles in JS require them but CSS does not.
I work in CSS every day I should've known this.
VSCode didn't pick it up either.
(Facepalm)
Assuming everything else is working properly like importing the right css file, using className, etc. I've found that, on rare occasions, something gets stuck in the browser cache and needs a full refresh.
Mac: Command+shift+R
Win: Ctrl+shift+R
Related
I have css below.
in myCss.css
.playlist { margin: 200 200; }
.playlist .channel { background: grey; }
and in JSX
import "./myCss.css"
.
.
render (){
return (
<div className="playlist" id="playlist">
</div>
)
}
It doesn't work. OK maybe I need some special way to JSX.
I googled around and found some ways like styled component.
However I want to use normal css way because some parameters like .playlist .channnel is generated by library in the <div className="playlist" id="playlist">.
So I can't change.
I want to stick with normal css in React and JSX.
Is it impossible???
Chances are your bundler is not loading the css file. If you are using Webpack, have a look at css-loader - https://webpack.js.org/loaders/css-loader/
Aside, styled-components is excellent, and you could use it along side your 'standard' css. You could define your 'standard' css using createGlobalStyle - https://styled-components.com/docs/api#createglobalstyle and use the styled api for everything else.
Maybe problem with
.playlist { margin: 200 200; }
First of all, you need to specify px. It becomes:
.playlist { margin: 200px 200px; }
Second of all, you remove second 200. Since it has no sense.
.playlist { margin: 200px; }
I am using react to build simple app, and using Materilize css. In my UserProfile Component class importing UserProfile.css import "./UserProfile.css.
/* UserProfile.css */
.custom-class {
margin-top: 30 !important;
color: pink;
}
UserProfile in render method have
<h1 className="custom-class">Title</h1> // Margin is not applyed, but color is pink
I have an option to
<h1 style={{ marginTop: 30, color: "pink" }}>Title</h1>
this works fine, but I prefer style code in css files.
I am not sure maybe that issue has no relation to overriding.
you should use px in css files, change your code to margin-top: 30px !important; and it should work.
And if you want to check overriding issues in css, you can inspect your code(with right click your browser and choose inspect) and check if its crossed or not.
You'll need to use camelCase for your classname, so .customClass instead of .custom-class.
Then your import statement should look like:
import css from './UserProfile.css`;
and in your component:
<h1 className={css.customClass}>Title</h1>
Read up on CSS Modules for more information.
You don't have a unit for margin-top in your css class
.custom-class {
margin-top: 30px !important;
color: pink;
}
I understand similar topics have been discussed multiple times, but I couldn't find the solution to the problem I am facing.
I am trying to change the styles of PrimeNG in my angular app.
In my component, I changed .ui-inputext class of PrimeNG.
body .ui-inputtext {
font-size: 0.8vw;
padding:0;
background-color: #557db1 !important;
}
This is working only when I set encapsulation:ViewEncapsulation.None in my component class.
I also tried using :host >>>
:host >>> body .ui-inputtext {
font-size: 0.8vw;
padding:0;
color:red;
background-color: #557db1 !important;
}
Issue with using encapsulation:ViewEncapsulation.None in my component is that it changes styles of PrimeNGcontrols in the whole app.
I want to make changes to the control only for this component where I have modified CSS class.
Is there something else I need to do or maybe I am missing something here?
This issue was raised on GitHub here (https://github.com/primefaces/primeng/issues/1812) but it was not tracked further.
Try with :host /deep/ in your component css file.
Add one class to that input field and try to change css using that class rather than using the body and add encapsulation: Viewencaptulation.None in your component.ts file. It will not change other component css.
Here is the example code you can try like this:
<input type="text" class="field_input" pInputText placeholder="Username">
.field_input.ui-inputtext {
font-size: 0.8vw;
padding:0;
background-color: #557db1 !important;
}
Stackblitz Link:
https://stackblitz.com/edit/angular-romzcu?embed=1&file=src/app/app.component.ts
I am having trouble removing these huge white margins on my react project. Below are some of the solutions I have tried.
* { margin: 0; padding: 0; }
/-/-/-/
body {
max-width: 2040px;
margin: 0 auto;
padding: 0 5%;
clear: both;
}
I have tried every variation. My only installed dependencies that should affect anything CSS wise is bootstrap and I don't think thats it. I tried adjusting max-width to a value of 2040px just to test if it would work and there appears to be a limit to which I can set the width. Help would be appreciated.
I should also mention that this is persistent throughout the entire page. This issue is not limited to the background image which I am linking in the css file
White Margins
All the browsers uses different default margins, which causing sites look different in the other browser.
The * is wildcard, means all elements present in our site (consider as universal selector), so we are setting each and every element in our site to have zero margin, and zero padding, to make the site look the same in every browsers.
If your style not getting applied then you can use !important to override style,
* {
margin: 0 !important;
padding: 0 !important;
}
If you created it using create-react-app there will probably be a file public/index.html.
There is a tag wrapped around the root where React will inject you App.
Usually the browser style-sheet set the margin of <body> to 8px.
That's most likely that white margin around your App that you're struggling to get rid off.
To remove it, one option is to open public/index.html and set the margin to 0 using inline styles like this:
<body style=margin:0>
In case you're using #emotion/react for styling you may alternatively (still assuming that there is this body tag in public/index.html) leave it as <body> and use the <Global> component to define styles for <body>. Something like this in your App.js:
function App() {
return (
<div>
<Global
styles={css`
body {
margin: 0;
}
`}
/>
<Your />
<Other />
<Components />
</div>
);
}
export default App;
User agent style sheet overrides the custom style. You can override this using !important in normal html and css
It is better to user react spacing library, rather than overriding the user default style sheet https://material-ui.com/system/spacing/
or you can use the following
<body id="body">
<div id="appRoot"></div>
</body>
style sheet
body
margin: 0
padding: 0
button
padding: 10px 20px
border-radius: 5px
outline: none
React JS code blocks
class A extends React.Component{
componentWillMount(){
document.getElementById('body').className='darktheme'
}
componentWillUnmount(){
document.getElementById('body').className=''
}
render(){
return (
<div> Component A </div>
)
}
}
class App extends React.Component{
constructor(){
super()
this.state = {
isAMount: false
}
}
handleClick(){
this.setState({
isAMount: !this.state.isAMount
})
}
render(){
return (
<div>
<button onClick={this.handleClick.bind(this)}> Click Me</button>
<div> App </div>
<hr />
<div> {this.state.isAMount && <A /> } </div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('appRoot'))
If you try:
* {
margin: 0 !important;
padding: 0 !important;}
You may have some issues. As I was using some mui, so this was distorting my components. I may recomend to modify the "body" in public/index.html using:
<body style=margin:0>
As you are using background image. Its problem due to image size ratio.
You have to use background-size: cover property in css.
Also use appropriate background-position to make sure the gavel comes in center bottom of page.
I was trying to add a background image in my react app but react left some margin on top and left.
const useStyles = makeStyles((theme) => ({
background: {
backgroundImage: `url(${Image})`,
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
width: '100vw',
height: '95vh',
}
After reading the documentation, I realized that it was not margin, but positioning of the image. Setting the position:fixed with top:0 and left:0 fixed the issue.
After reading the answers above and trying them I have concluded that the best way is to keep your index.css(note: that the index.css in particular has the margins already set to 0 globally.) and App.css files that are auto generated when you "npx create-react-app".
I have noticed that many beginner tutorials tell you to remove these files and more, but after facing this problem it is honestly easier to just edit the boilerplate than start from scratch.
Simply add to the app.css or your main CSS file
body { margin: 0; padding: 0; }
* { margin: 0; padding: 0; } override by browser.
try
html,body{
margin:0;
padding:0;
}
I am having a bizarre issue whilst creating my first Angular2 app.
I am applying some CSS to a component host (example-component) yet it doesn't appear in the browser?
This is my first time posting for Angular in SO, so hopefully I include everything needed to attain some help.
example.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'crate',
templateUrl: './app/folderA/folderAB/crate.html',
styleUrls: ['./app/folderA/folderAB/crate.css']
})
export class MyComponent {}
index.html
crate.html
<div class="background">
<div class="content">
<p>Content</p>
</div>
</div>
crate.css
:host-context(.lg){
width: 100%;
background-color: #000;
border-radius: 25px;
}
What I don't understand, is that I open this in chrome & firefox, and I see the following CSS stated under rules for example.component.
.lg[_nghost-ims-2], .lg [_nghost-ims-2] {
width: 100%;
background-color: #000;
border-radius: 25px;
}
It is correctly applying the CSS to example-component, but it is not being displayed / rendered in browser. What am I doing wrong / missing?
EDIT
The exact same issue applies even if I change crate.css to:
crate{
width: 100%;
background-color: #000;
border-radius: 25px;
}
Any component with an unrecognized tagName like <crate></crate> is created as a HTMLUnknownElement and has empty values for all the style properties, if you want it to behave like a div then add display: block; to your stylesheet.
See Browsers' default CSS for HTML elements for additional resources on the default css for different browsers.