This question already has answers here:
How to make React CSS import component-scoped?
(6 answers)
Closed 1 year ago.
i am trying to create React aplication which uses AG-Grid table. Previously I customized table and removed borders of the ag grid by overiding css. I used this code to do so.
.ag-root-wrapper {
border: solid 0px !important;
border-color: var(--ag-border-color, white) !important;
}
But i noticed that code which i used only for one component has influenced whole aplication.
I was curious maybe is there way to locally import css only for specific component?
This is the way i was importing css for component
import './Statistics.css'
import { AgGridColumn, AgGridReact } from 'ag-grid-react';
const Statistics = () => {
return (
<div className='content'>
<div className='content-left'>
<div className="ag-theme-alpine">
<AgGridReact
rowData={data}
style={{borderColor: 'red'}}
rowSelection="single"
filter={false}
>
<AgGridColumn
headerName="Date"
field="date"
resizable={true}
filter={false}
width={130}
flex={1}
sort={'asc'}
cellStyle={{fontSize: '1vw'}}
/>
</AgGridReact>
</div>
</div>
</div>
)}
export default Content;
When you use pure css or css preprocessors (Sass, less..), the imported css will always be global to your app. It is really useful to scope every component in a unique classname so you can scope css.
import './Statistics.css'
import { AgGridColumn, AgGridReact } from 'ag-grid-react';
const Statistics = () => {
return (
+ <div className='root-statistics'>
<div className='content'>
<div className='content-left'>
<div className="ag-theme-alpine">
<AgGridReact
rowData={data}
style={{borderColor: 'red'}}
rowSelection="single"
filter={false}
>
<AgGridColumn
headerName="Date"
field="date"
resizable={true}
filter={false}
width={130}
flex={1}
sort={'asc'}
cellStyle={{fontSize: '1vw'}}
/>
</AgGridReact>
</div>
</div>
</div>
+ </div>
)}
export default Content;
.root-statistics .ag-root-wrapper {
border: solid 0px !important;
border-color: var(--ag-border-color, white) !important;
}
Related
I have a very simple div in my footer:
import React from "react";
import { useHistory } from "react-router-dom";
import style from "./DesktopFooter.module.css";
const DesktopFooter = () => {
const history = useHistory();
return (
<div className={style.container}>
<div className={style.footerNav} id="phoneNumber">
999-999-9999
</div>
<div className={style.footerNav}>
</div>
<div className={style.footerNav}></div>
</div>
);
};
export default DesktopFooter;
In my CSS I want to style both on the class and id:
.footerNav {
width: 50%;
display: flex;
}
#phoneNumber {
font-size: 2rem;
}
However my component is not recognizing the id styling I try to apply.
Could anyone point me in the right direction.
Ya, After you update a question, I found the issue, you are try to load style for id as normal Dom, but its will not work since you are not include css file as is, you are import style file to style param...
so, what you need to do is replace id="PhoneNumber" to this
<div className={styles["footerNav"]} id={styles["phoneNumber"]}>
999-999-9999
</div>
Check the demo url
Full Code:
import React from "react";
import style from "./MyComponent.module.css";
export default function App() {
return (
<div className={style.container}>
<div className={style["footerNav"]} id={style["phoneNumber"]}>
999-999-9999
</div>
<div className={style.footerNav}></div>
<div className={style.footerNav}></div>
</div>
);
}
I would suggest having it as either a class or an id. Classes usually have a higher priority, meaning that the id will be ignored.
This is what it should look like:
.phoneNumber {
font-size: 2rem;
width: 50%;
display: flex;
}
<div class = "phoneNumber">999-999-9999</div>
However, if you would like to get around this, I would use another element within the div, such as:
#myID{
font-size: 2rem;
}
.phoneNumber {
width: 50%;
display: flex;
}
<div class = "phoneNumber">
<p id="myID"> 999-999-999 </p>
</div>
Ok I found a solution, or at least a work around. The problem seems to be that the file was a css module and not just a css file.
I changed the name of the css file from DesktopFooter.module.css to DesktopFooter.css
and I changed my import statement from
import style from "./DesktopFooter.module.css" to import "./DesktopFooter.css
I'm struggling with applying css style for each child of given tag. I'm using CSS modules together with semantic-ui-react:
character.module.css
.Character > GridColumn {
border: solid 4px red;
}
character.js
import React, {Component} from 'react';
import {Grid, GridColumn} from "semantic-ui-react";
import styles from './character.module.css';
class Character extends Component {
render() {
return (
<div>
<Grid centered textAlign='center' className={styles.Character}>
<GridColumn floated='left' width={1}>
<h1>Some content</h1>
</GridColumn>
<GridColumn floated='right' width={2}>
<h1>Some content</h1>
</GridColumn>
</Grid>
</div>
);
}
}
export default Character;
Above approach doesn't work. I tried to apply style manually via chrome tools and border is pretty visible, where I'm making misatke? Is it even possible to do it with CSS modules?
You cant access GridColumn from css as it's not a valid tag.
One Solution: change it to the wrapper div of GridColumm, something like:
.Character > div {
border: solid 4px red;
}
Other Solution is to add class to each GridColumn component in css module file, something like: .GridColumn
Now you can access it through css:
.Character > .GridColumnv{
border: solid 4px red;
}
I'm trying to style a component in my React application, but I do not want to create an external stylesheet because it's a small project. How can I style this image component without using an external stylesheet?
return (
<div>
<Image>
<div>
<img src='./resources/image.png alt='image'>
</div>
</Image>
</div>
);
I've found resources online for using inline styling on a specific element, but I want to make my code clean by putting it at the top of the component like using a style tag at the top of an HTML file. I haven't been able to find anything that resembles this in React.
For inline styles you can define a style object, either at the top of the file, or in your render method, and then refer to it:
var myStyle = { margin: 10 }
return (
<div>
<Image>
<div>
<img style={myStyle} src='./resources/image.png alt='image'>
</div>
</Image>
</div>
)
More info in the docs: https://reactjs.org/docs/dom-elements.html#style
Internal CSS styling in JSX is very similar to how it's done in HTML. The only difference is that you need to declare the style names as variables because they are treated like JS objects. With this in mind, you also need to end each property with a comma instead of a semicolon, and the last property should have no punctuation at the end. Using this approach, you should also use style={} instead of className={}. You can read more about JSX styling here.
const myStyle = {
width: '300px',
height: '300px',
border: '2px solid black'
}
const Image = () => {
return (
<div>
<img style={myStyle} src='./resources/image.png alt='image'>
</div>
);
}
You can do something like this:
const Image = styled.div`
background: #1d9ac2;
img {
border: 1px solid red;
}
`;
There are several solutions for this, and a big debate about which one is "the best".
I don't know which one is the best, but I can tell you which one I use:
Styled components (https://www.styled-components.com/)
With this, you would define an object like this
let styled = require('styled-components');
// Or for fancy people
import styled from 'styled-components';
const Image = styled.div`
background-color: red;
/* You can even put classes or selectors in here that will match the sub-components */
.some_class_used_inside { color: black; }
img { width: 100px }
`
and use it like this
return (
<div>
<Image> {/* This will be the `<div>` with `background-color: red` */}
<div className="some_class_used_inside"> {/* This will now have `color: black` applied */
<img src='./resources/image.png alt='image'> {/* This will have `width: 100px` applied to it */}
</div>
</Image>
</div>
);
Ofcourse, there are many other libraries to do it, and everyone will have to find their own favorite I guess :)
I am having trouble getting my styled component to make a change to an <input /> wrapped in a React component. In Dev Tools I can see the style I am trying to override here:
.ui.input input {...}
I think the wrapping component needs to pass className to input i.e
<input className = {this.props.className} ..> ... </input>
but I cannot get the style to override with or without that. I will provide some snippets below.
//styled component
const StyledSearch = styled(Searchbar)`
&.ui.input input{
border: 0px !important;
}
`;
class SearchBar extends Component {
...
render() {
const style = {
display: this.state.showResults ? 'block' : 'none',
maxHeight: 500,
overflowY: 'scroll',
};
return (
<div className="ui search fluid" ref="container">
<div
className={`ui icon fluid input ${this.props.loading ? 'loading' : ''}`}>
<input type="text"
placeholder={this.props.placeholder}
onFocus={this.focus}
className = {this.props.className}
value={this.props.value}
onChange={this.props.onChange}/>
<i className="search icon"></i>
</div>
<div
className="results"
style={style}>
{
this.props.results.map((result, index) => (
<a
className="result"
key={index}
onClick={this.select.bind(this, result)}>
<div className="content">
{
result.get('image') ?
(
<div className="image">
<img src={result.get('image')} style={{ maxWidth: 50 }}/>
</div>
) : null
}
<div className="title">
{result.get('title')}
</div>
<div className="description">
{result.get('description')}
</div>
</div>
</a>
)
)
}
</div>
</div>
);}}
Basically, styled-components creates a new unique class name (in other words, a new namespace) for any DOM or React Components for which the styled function is called.
That means, when you use styled(SearchBar), styled-components wraps SearchBar component and attaches a unique class name to its root DOM. Then it passes that unique class name to the descendent DOMs and components (in your cases, nested div, input, a).
For this method to work, your root DOM must have a className that can be configured from outside. That's why, styled-components expects that, root DOM has the definition ${this.props.className} as the value of its className props. If your component lacks this, styled-components will not be able to create a new namespace which it can use to apply styling specific to it.
So, for your technique to work, you must assign ${this.props.className} as one of the values of className prop defined at the root div of SearchBar.
Working Demo
If you don't have access to SearchBar, you can wrap it with another component. Overhead of this process is that, you have to use an extra DOM level
Working Demo
From what I can tell, you need to apply the styles generated with styled-components to the wrapper element. This is due to the specificity of the .ui.input input external style. Meaning we can't simply target the input element with a new style because the .ui.input input selector is more specific and takes precedence. Here's a simple CSS example showing how the specificity of the .ui.input input selector takes precedence over the input styling:
.ui.input input {
border:2px solid red !important;
}
input {
border: 0px !important;
}
<div class="ui input">
<input />
</div>
This same issue is at play in your case. In the example below I've created a new Wrapper component, which has a style of:
&.ui.input input {
border: 0px !important;
font-size: 24px;
}
defined on it. This targets the inner input element, with more specificity, to override the external styles.
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
class InputWrapper extends React.Component {
render() {
const Wrapper = styled.div`
&.ui.input input {
border: 0px !important;
font-size: 24px;
}
`;
return(
<Wrapper className="ui input">
<input type="text" placeholder="Input" />
</Wrapper>
)
}
}
ReactDOM.render(
<InputWrapper />,
document.getElementById("app")
);
Here's a WebpackBin example.
Currently at version 4 you can do it as simple as
const Input = styled.input`
border:2px solid red !important;
`;
it will rendered as native input with SC className
I just came across a strange behaviour in Angular 4. I have the following component:
#Component({
selector: 'user-wallets',
templateUrl: './user-wallets.component.html',
styleUrls: [
'./user-wallets.scss'
]
})
export class UserWalletsComponent implements OnInit, OnDestroy {
<!-- component logic... -->
}
In that template I have the following markup:
<div class="user-wallets">
<h2>
<span jhiTranslate="coinlenderApp.userWallets.home.title">Wallets</span>
</h2>
<jhi-alert></jhi-alert>
<ngb-tabset>
<ngb-tab *ngFor="let userAccountArr of sourceSystemsUserAccounts">
<ng-template ngbTabTitle>
{{ userAccountArr[0].sourceSystem.name }}
</ng-template>
<ng-template ngbTabContent>
<div class="row">
<div class="col-md-12 charts-col">
Charts here
</div>
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
Now, in the associated stylesheet (SCSS) I have the following styles:
.charts-col {
background: black;
}
.tab-pane {
float: left;
min-width: 300px;
background: black;
}
The code is working correctly and the tabs are correctly rendered. There's no error in the console.
Now the strange thing is, that the style for .charts-col is correctly applied, but the styles for .tab-pane is not.
.tab-pane is a generated DOM-object out of .
However, when I put exactly the same styles for .tab-pane in my global.scss, then the styles get applied.
Now my question is: Whey does the styles for .charts-col get applied and not the one for .tab-pane (which is generally working in global.scss, but not in the specific styles for the component)?