So I have a very large stylesheet and I'm attempting to use it in my React code. I know typically you would use this format for styling in React:
transparentBg: {
background: 'transparent'
},
WhiteText: {
color:'white'
},
However, my css stylesheet looks like this:
.transparentBg{
background: transparent;
}
.WhiteText{
color:white;
}
Is there anyway to convert my entire CSS stylesheet into that React-style format? Or a way for me to just use the original CSS stylesheet without converting it?
Your CSS is still just CSS and React still just renders HTML elements on the page.
This means that you can add your large CSS file into html file and just add CSS classes / ids etc. that you define there to the elements in React.
So if you have
.transparentBg{
background: transparent;
}
.WhiteText{
color:white;
}
Then in your React components you can use these classes:
var SomeComponent = function () {
return <div className="WhiteText">
Foo Bar Baz
</div>;
};
Related
I have a REACT application (bootstrapped with create react app and react-bootstrap) for which I am trying to add option to switch to DARK theme if user enabled this in his settings. I am storing the settings on server and fetching them into properties.
I have a separate stylesheet called dark.css where all my component styles are overriden.
dark.css (example):
#root {
background-color: var(--dark);
color: var(--light)
}
.card {
background-color: var(--dark); // overriding bootstrap styles here
}
I am trying to apply it at the root of my application like this:
componentWillReceiveProps() {
if (this.props.profile && this.props.profile.theme === 'dark') {
require('./styles/dark.css');
}
}
It works great when running the application locally with yarn start. But when I actually build the app using webpack, it works really strange. Part of the new styles are applied and part on, regardless of which theme is selected. For example background is applied from the main theme and ignored in the dark theme but text color is the opposite.
Why is this happening?
It seems that the dark stylesheet is not being applied at all when building the app with webpack, although everything looks correctly when running it with yarn start.
I guess that you have a naming clashes, which overrides your css.
React supports CSS Modules alongside regular stylesheets using the [name].module.css file naming convention.
CSS Modules let you use the same CSS class name in different files without worrying about naming clashes
I solved my issues simply by importing all styled css sheets and then prefixing them like this:
.dark .card {
color: black;
}
.light .card {
color: white;
}
I assign class to the wrapper based on my props:
<div id="root" className={theme}>
// content
</div>
Works like a charm.
I created a spinner component. I wanted it to be self-contained and not rely on external css, so in the component I include the scss to style it. The component template is a div with a class of sbl-circ. I can add this anywhere in my app and it works as designed.
Now, I created a second component (a button). I want to add the spinner component to this button. It works, but the spinner color is not correct for when it's inside the button.
So, I am trying to re-color the spinner with the scss for the button component. So far the only way it works is if I do
:host ::ng-deep {
button.btn.btn-primary {
.sbl-circ {
color: white;
}
}
}
I know that ::ng-deep is deprecated. What's the correct way for the button component to re-color any spinner components inserted inside of it?
Try using :host-context.
You should be able to use it like:
:host-context(button.btn.btn-primary) .sbl-circ {
color: white;
}
Excuse my unfamiliarity with angular. But if I were to attempt the resulting css to not be over-written by another style, I would try to use !important as a property value in the scss.
Example:
p {
color: red !important;
}
I'm setting up Shoppy on my website but I don't like the embed style.
Is there a way to change the CSS from my code?
<script src="https://shoppy.gg/api/embed.js"></script>
<button data-shoppy-product="PRODUCT ID">Pay</button>
You have to include your own CSS file and have to overwrite the default CSS. You can overwrite the default CSS by adding a class selector with the default class selector in your CSS file and write your own CSS. For example, if the default CSS is,
.embed--header {
background: #1c2260;
}
then you can overwrite like this:
.embed--header.changebackground {
background: #000;
}
Be sure to give the class name as "changebackground" to your element, otherwise nothing change will happen.
So I'm using Ant Design UI library with my create react app which is making it difficult for me to edit the style of more complicated Ant Design components. Like the progress bar is by default blue:
I want to make it another color and when I look at HTML in the Chrome console I see:
The className for that element is ant-progress-bg. Is there any way I can write some code in my React component and update the style to be from style={width: "12.5%, height: 8} into style={color: 'red', width: "12.5%, height: 8}?
This is all the React code I need to write to generate the Progress bar using the ant design library:
import { Progress } from 'antd';
<Progress
percent={percentVotes}
showInfo={false}
status="active"
/>
I've also tried importing CSS and added an "ant-progress-bg" CSS class with the styling I want but it didn't do anything.
In my Matches.css file I have:
.ant-progress-bg {
color: red;
}
which I import into my Matches.js file with import './Matches.css';
Here is a demo https://codesandbox.io/s/k0m0nl1my3
If you want to change progress bar color for all places then override this class
.ant-progress-bg {
background-color: red !important;
}
And if you want to change color only for this specific progress bar, add some extra class like
.my-progress-bar .ant-progress-bg {
background-color: red !important;
}
If you are using less for your custom styles, it's even simpler
.my-progress-bar {
.ant-progress-bg {
background-color: red !important;
}
}
<Progress
percent={percentVotes}
showInfo={false}
status="active"
className="my-progress-bar"
/>
In a Polymer app I want to give the users the option to choose a certain theme from a set provided. So let's say that in a wrapper element I have a property called "theme" which holds a value like "dark", "light", etc. I would like to include a certain file with custom styles depending on that value.
So I have an element my-app-wrapper that includes some other ones if the user is not authenticated, or one called my-app for those that are. Now I tried to refactor it so that I have a new element called my-app-dark that extends my-app and just adds the import to the custom styles I need.
So in a file, let's say dark.html I have something like:
<custom-style>
<style is="custom-style">
html {
--custom-theme: {
--app-primary-color: #990AE3;
--app-secondary-color: var(--paper-deep-orange-500);
}
;
}
</style>
</custom-style>
And in my-app-wrapper I have something like this:
<template is="dom-if" if="[[_equals(theme, 'dark')]]" restamp>
<my-app-dark></my-app-dark>
</template>
<template is="dom-if" if="[[!_includes(themes, theme)]]" restamp>
<my-app></my-app>
</template>
The problem here is that in the wrapper element I need to import both my-app and my-app-dark. So even if I have that if statement and I use my-app the custom style imported by my-app-dark is still loaded and it applies its styles.
My only restriction is that I can't use lazy imports and load the file with Polymer.importHref, but even if I could, the import would happen after the CSS rules are parsed so it wouldn't work.
I experimented with theme changes with polymer 1.x using events and changing the theme programmatically.
In the main may-app.html file I set colors to variables in the host element:
<style include="shared-styles">
:host {
--some-color: black;
}
</style>
These css color values were used throughout the child elements.
When a change-theme event was called, I used this.customStyle['--some-color'] = 'white'; and Polymer.updateStyles(); to apply the color change.
_onChangeTheme() {
if (this.darkTheme) {
//change to light theme
this.customStyle['--some-color'] = 'white';
this.set('darkTheme', false);
} else {
//change to dark theme
this.customStyle['--some-color'] = 'black';
this.set('darkTheme', true);
}
Polymer.updateStyles();
}
In Polymer 2 it should probably look something like this:
_onChangeTheme() {
if (this.darkTheme) {
//change to light theme
this.updateStyles('--some-color','white');
this.set('darkTheme', false);
} else {
//change to dark theme
this.updateStyles('--some-color','black');
this.set('darkTheme', true);
}
}
The easiest way would be to just set a class on one of the top elements, and then use CSS.
<style>
.some-top-element.dark {
background-color: #000
color: #fff;
}
.some-top-element.light {
background-color: #fff;
color: #000;
}
</style>
<div class$="some-top-element [[theme]]">
Change the property theme to set a new CSS class. It's as simple as that. Do note the $ in the class property.