Need a bit of help with react code.
Suppose a component has style declared in it like
<style>{
.list-done {
color:red;
}
`}</style>
then how do I use this style to style my link tag
<li>item1</li>
I want to use classnames for this. but how to use it in this case?
I was told to use something like this, but can't find anything in the documentation --> import cx from 'classnames';
Well, I have now declared a variable here
const styleItem={color:'red'}
How do I conditionally use it?
I am doing it like this
style={item.done?styleItem:''}
and it doesn't work.
What am I doing wrong here?
You need to add a className to your list Item, With react you can add it using className attribute
<li className={'list-done'}>item1</li>
You might need to load styles in your component. You need to configure style-loader with webpack for it.
Check this answer on how to configure styles with webpack
or else write inline styles
render() {
const listStyles = {
color:red;
}
return (
<li styles={item.done? listStyles: {}}>item1</li>
)
}
You can't declare styles like this in react. You need to put it as a variable and assign it in style attribute.
let styles = { color:red; }
<li style={styles}> item 1 </li>
OR
Declare the class outside (may be in some css) and use className attribute to assigne that class
<li className='list-done'> item1 </li>
Related
Chaining selectors in css file doesn't seem to apply styles. I am importing the styles in the component and it only applies for the main class, for example:
import styles from './Home.module.css'
const Home = () => {
return (
<header className={styles.header}>
<div className={styles.headerContainer}>
...
and than in Home.module.css I have:
.header {
// some styles that are getting applied
}
.header .headerContainer {
//some styles that don't show up
}
On the page I am able to see header that is styled but not the headerContainer. So I understand that Next js automatically adds some variables to the end of the classes when passing styles item to jsx but trying to understand how I would chain the selectors in css and be able to use styles in such way in Next JS.
I have a task when I need to extend the styles of a certain element. I take the basic styles through the module, and the additional ones will need to be done inside the function that will be in the component.
How can I extend the styles inside the component if I have already added styles from the module there?
import style from './styles.module.css';
const optionalStyles = {
margin: "30px"
}
<p className={`${style.subtitle} ${optionalStyles}`}>42</p>
<p style={optionalStyles} className={`${style.subtitle}`}>42</p>
You can:
Create another class inside your styles.module (or any other module) and add it conditionally:
import style from './styles.module.css';
<p className={`${style.subtitle} ${someCondition ? style.otherStyles : ''}`}>42</p>
Use inline styles:
import style from './styles.module.css';
const optionalStyles = {
margin: "30px"
}
<p className={style.subtitle} style={someCondition ? optionalStyles : {}}>42</p>
I did see a lot of similar questions on SO but at end, it seems that my issue is a bit different..
I have a react project where (for some reason) I want two types of CSS loading:
Some global (imported from main.tsx as import 'assets/global.css';)
Some scoped (imported from a component as import style from './style.module.css';)
The global ones works as expected, it's the module one that are weird.. If I want to style a simple <a></a> within a div, this following works:
copyrights
.copyrights a { // as Link is rendered as a `<a></a>`
text-decoration: none;
}
/*...*/
import style from './style.module.css';
export const CopyrightsComponent = () => {
return (
<Container className={style.copyrights}>
<Row className={`justify-content-center`}>
<p>
{COPYRIGHTS_TEXT}
<Link to={TERMS_OF_USE_ROUTE_ROUTE}>{COPYRIGHTS_TERMS_OF_USE_HYPERLINK}</Link>
<Link to={TERMS_OF_USE_ROUTE_ROUTE}>{COPYRIGHTS_PRIVACY_POLICIES_HYPERLINK}</Link>
</p>
</Row>
</Container>
);
};
export default CopyrightsComponent;
HOWEVER! When trying to nest CSS in order to select the right child (like a specific img within a certain div), it doesn't work.. I don't understand why
foo
.foo .bar1 a {
text-decoration: none;
}
.foo .bar2 a {
color: red;
}
/*...*/
import style from './style.module.css';
export const FooComponent = () => {
return (
<div className{style.foo}>
<div className{style.bar1}>
<a>bar 1</a>
</div>
<div className{style.bar2}>
<a>bar 2</a>
</div>
</div>
);
};
export default FooComponent;
Thanks for any help...
This doesen't work since your .bar class is scoped to the element.
It should work, if you reduce the specificity of the selector to either:
.foo div a
or,
.bar a
When you utilize CSS modules, and you link your class directly to an element - the class name becomes unique, since obfuscation is appended to the class name, as per the CSS modules spec (It is scoped to the element). You can see this by inspecting a DOM element that you have linked to a class with this technique; It looks something like this: component_name-module--class_name--eq-vo.
Because of this, when you try to chain custom selectors like you did originally, the middle part of the selector (.bar) doesen't exist in its original simplicity because of this obfuscation.
I have two .jsx files that represent their respective components.
The first one is, Blog.jsx
import React from "react";
import '../assets/css/blog.css';
export const Blog = () => (
<div>
<h1>Hello Blog</h1>
</div>
)
With its respective CSS file, blog.css
div { background: #ff481f; }
and the second one is, Landing.jsx
import React from "react";
import '../assets/css/landing.css'
export const Landing = () => (
<div>
<h1>Hello Landing</h1>
</div>
)
With its respective CSS file, landing.css
div { background: #86ff2b; }
I have added routing and called instances of those two components on the App.js file which is the default file of a React application. After running the application, when navigated to components, I faced a problem that the background color is the same for both of the components (It loads landing.css only and never changes).
How can I fix that problem that each component only uses its respective .css file and loads it?
By default webpack and other build tools will compile all CSS files into one, even if css was imported in separate JSX files. So you can't use different CSS files and expect you don't affect on another part of page.
You have some options:
Use BEM for naming class names.
Use cssModules. In this case elements will have their own css class name and styles will not affect any other elements except if you use :global selector.
css-module
Using html tags as css selectors is a bad practice (because there is the behaviour you describe).
You should use only css classes or inline styles (using id's is another bad practise, id's have high priority).
div {
width: 20px;
height: 20px;
}
#id {
background: red;
}
.class {
background: green;
}
<div id="id" class="class"></div>
In case using css classes there is the same problem (when you have two similar classes). And this case is decided using css modules (set of rules of building) or you can use css-in-js (external library) which has its pros and cons. Also you can use BEM (methodology) and if your application is not big you can avoid this trouble.
css modules will add to your classes random hash and instead .my-awesome-class-name you will get .my-awesome-class-name-dew3sadf32s.
So, if you have two classes .class in the first file and .class in the second file in the end you will get two classes .class-dew23s2 and .class-dg22sf and you styles will resolve as expected.
css-in-js is a similar way except you should write your styles using javascript with some profits like including only those styles that are needed at the moment (what you are looking for right now) and several others.
You can code using pure css / scss / postcss / etc but many companies already choose between css modules and css-in-js.
BEM is just naming conventions for your class names.
And lastly - if you use inline-styles using react you should remember:
{} is constructor of object and {} returns new object on every call, it's mean if you write something like:
class MyAwesomeComponent extends Component {
render() {
return <div style={{color: "red"}}></div>;
}
}
or
class MyAwesomeComponent extends Component {
render() {
const divStyles = {color: "red"};
return <div style={divStyles}></div>;
}
}
div will re-render every time your render will call because div takes new prop.
Instead, you should define your styles (for example) in outside of your class:
const divStyles = {color: "red"};
class MyAwesomeComponent extends Component {
render() {
return <div style={divStyles}></div>;
}
}
Don't define your css using HTML tags because it will affect your entire application.
use className,id or inline styling.
like- App.css
.myApp{ color: red;}
#myApp2{ color: blue;}
App.js
import './App.css'
<div className="myApp">color changed by className</div>
<div id="myApp2">color changed by id</div>
<div style={{color:'red'}}>color changed by inline object styling</div> // inline styling
This is not the best solution if you are looking forward to improve yours css imports/loads.
However could be the best solution if you dont want to go in deep in css, resolve the problem fast and keep working with HTML tag.
You can add a div for each component, define an Id for the div and wrap the component. Afterwards in the component's css fies you are going to define all the styles starting with the #id so all the css classe or HTML tag will affect just the corresponding component.
//App render in root
ReactDOM.render(
<App />,
document.getElementById('root')
);
//App
function App(props){
return [
<Blog />, <OtherComponent />
]
}
//Blog component
function Blog(props){
return <div id="blog">
<h1>I am Blog</h1>
</div>
}
//Other component
function OtherComponent(props){
return <div id="otherComponent">
<h1>Im am other component</h1>
</div>
}
/* blog.css*/
#blog h1{
color:yellow;
}
/* otherComponent.css*/
#otherComponent h1{
color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
I am trying to style PrimeNg's dropdown icon.
https://www.primefaces.org/primeng/#/dropdown
Here is how it currently looks and what I'm trying to get it to look like.
I'm guessing I have to style the
ui-dropdown-trigger
but I'm not sure what to set it to.
I tried background-color but that didn't work.
Another thing I tried was to just set it as an attribute like:
<p-dropdown ... [styleClass]="{background-color:black}" ...></p-dropdown>
Any ideas?
Edit:
This is how I got the desired output:
Turned off encapsulation (reference)
Added the following code to the css:
body .ui-dropdown .ui-dropdown-trigger {
background-color: #2399E5;
color: white;
}
To change the dropdownicon property itself, you need to do 2 things:
1)You will need to create a var in the component.ts in which you will put the string of the icon you want. But you will have to add 'fa fa-fw' at the begining of the string. For example, if you want to put a 'fa-star', the complete string will be 'fa fa-fw fa-star'
export class AppComponent {
star = 'fa fa-fw fa-star';
constructor(){}
}
2)In the component.html, you have to add [dropdownIcon]=var
<p-dropdown[dropdownIcon]="star" placeholder="Search (Jobs)"></p-dropdown>
And the result will look like
https://i.stack.imgur.com/WZDVx.png
You can set it as an attribute using:
<p-dropdown ... [style]="{'background-color': 'black'}" ...></p-dropdown>
or you can style the ui-dropdown-trigger but, you would have to do it in the global style sheet, not the component's.
To style ui-dropdown-trigger inside the component's css file you would have to use
:host >>> .ui-dropdown-trigger {...}
but, this has been deprecated.
I use included bootstrap theme from primeng. So I have to adapt:
body .ui-dropdown .ui-dropdown-trigger {
background-color: blue;
}
in the CSS to colorize the trigger in the theme.