In my React project I am using ReactBootstrap5 and Scss
I have a custom.scss file where i added
$new-colors: (
"custom-color": #245343
)
$theme-colors: map-merge($theme-colors, $new-colors);
In my Button components I successfully can use this custom theme color.
<Button variant="custom-color">Bootstrap Button</Button>
However, in my Navbar component I try to use "custom-color" for bg.
<Navbar bg="custom-color"> </Navbar>
How can I setup a customer color/them-color variable so I can reference it easily throughout the entire app?
Related
I added the <Planet/> (from react-planet) to my App and the placement of some <Grid/> (from the Material UI) components changed.
While looking inside "Elements" in DevTool I noticed that divs inside the <Planet/> component have two classes jss3 and jss{i} where i is the next integral number. Each has different properties inside which overwrites every component in App that is using one of the jss{i} classes.
I also noticed that at first render i iteration, which applies to jss{i} used in newly created divs, starts from 1 and ends at 9 - because I have 6 planets so 1 for the main div, 2 for the central planet, 3 for divs' first class, and 4-9 for the six divs' second class. After the second render number goes from 10 to 18.
Screenshots of Elements at first render and second.
The class ={jss3 jss4} example
The class ={jss3 jss5} example
I assume that after creating planets by <Planet/>, whose children have two classes, the newly created class jss{i}, based on makeStyles-root-{i}, is overwriting properties of jss{i}, which is used somewhere else on page by <Grid/> components thus changing placement for the whole page.
Code where <Planet/> component is used:
return (
<Grid
item
container
justifyContent = "center"
style = {{ margin: 30 }}
>
<Planet
centerContent={
<Fab size="small" color="primary" aria-label="add" onClick={handleOpen}>
<AddIcon />
</Fab>
}
open={isOpen}
autoClose
orbitRadius= {50}
rotation = {90}
hideOrbit
friction = {20}
>
<div/>
<div/>
<div/>
<Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddLineChart}>
<ShowChartIcon />
</Fab>
<Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddBarChart}>
<BarChartIcon />
</Fab>
<Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddPieChart}>
<PieChartIcon />
</Fab>
</Planet>
</Grid>
);
I tried putting only <div/> components inside <Planet/> but nothing changed. Changing from <Grid/> to normal <div/>, also didn't change anything.
Also, I tried to find a similar problem on StackOverflow or somewhere else but I am not sure how to describe the problem using proper keywords.
I am not sure if it is some bug in the react-planet library that makes react-planet and material-ui impossible to use together or if there is a problem inside my code.
I am not sure what was exactly the cause of the "multiply class in one component" bug, but I copied Planet.tsx and Orbit.tsx from the react-planet repository and changed some code, get rid of makeStyles and problem solved. It was probably of nested makeStyles in all of those components in react-planet which conflicted with each other at different component rendering levels causing it to render multiple times in one object.
Additionally, it was overriding Material UI components styles due to simplified class naming from MUI makeStyle to css class while building production (makeStyles-root-{i} -> jss{i}, makeStyles -> jss).
Overriding styles were probably caused by the react-planets dependency of the old/different MUI version than I have for the rest of the code which created two styles generators for each of those versions as mentioned in MUI FAQ. The first generator created class from makeStyle for all of my page naming every class jss{i++} for i starting at i=1 and ending when all classes are renamed, then the react-planet generator created styles for its objects naming every class jss{i++} starting from i=1 leading to overriding every previous class=jss{i} with new properties.
I want to display an image in my VuePress markdown file. Normally, I'd go with:
However, I'd like to create a custom Vue component that will style the images in a specific way. Then, some images would be displayed using the "standard" markdown syntax (like above), and some others using my custom component.
With my custom component, I'd display the images like this:
<MyComponent src="./resources/myimg.png"/>
As you can see, the images are placed alongside my markdowns, in a resources directory. This makes sense for me, because the image is close to the markdown where it gets displayed.
Unfortunately, the image does not get displayed when I use MyComponent. VuePress (webpack?) handles the images during build and places them in some other directory with a different name. The "standard" Markdown image reference works fine, its URL to the image is set up correctly by VuePress. However, MyComponent does not work, because the src parameter is just a string for VuePress and it does not transform it in any way.
I know that one solution would be to place my images in the /vuepress/public folder. However, I would want to keep the same organization as I have now - images alongside documents.
How can I achieve that?
I had the same issue.
I used the answer #papey provides for a Vue question here
Here is one thing he suggests
<template>
<div id="app">
<img :src="require('./assets/logo.png')"/>
</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
</style>
I have started a new app using React and react-bootstrap. There is only one component outside the App.js file. The contents:
import React from 'react';
import { Accordion, Button, Card } from 'react-bootstrap';
const accordionDemo = (props) => (
<Accordion defaultActiveKey="0">
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Card one
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>Body of Card One.</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="1">
Card two
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>Body of Card Two.</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
);
export default accordionDemo;
This results in a button and text displaying for each card in the code. The buttons don't do anything except create a warning in the console: index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode.
A warning should break, right?
is this a react-bootstrap wide problem? Or perhaps Boottstrap?
Do I need to manually import some CSS? I thought The react components would come with that styling already.
So I was foolish. I did not have the bootstrap scss imported into my main scss file. And... that was everything.
The answer, therefore, is yes, you DO need to import CSS separately when using react-bootstrap -- as per https://react-bootstrap.github.io/getting-started/introduction/
I'm a graphic designer who has to customize a project done with strapi - and I am sooo lost. I managed to change backgroundcolors, backgroundimages so far - no problem. BUT: I am totally unable to customize the elements like the primary buttons.
I found lots of class definitions ".primary", changed them - without a result ... in the end I removed them all ... but the primary buttons stills look the same. How? Why?
The only why to get rid of the visual appearance of the primary button, was by removing (e.g. of the login page -> within the index.js under admin/src/containers/AuthPage) "primary" of the buttons declaration.
<Button primary label="users-permissions.Auth.form.button.login" type="submit" />
But that's not what I wanted. I want to customize e.g. the primary buttons. Not getting rid of it.
I searched stackoverflow for strapi customization or ui issues but couldn't find a solution. I found a lot of strategies of overriding bootstrap CSS, e.g.:
How can I override Bootstrap CSS styles?
But strapis SCSS seems to something different I obviously don't understand yet.
If anyone has an idea or did already overrides to e.g. primary button - please let me know.
Thanks in advance, Stef.
You have two ways to override the default style of a button
You can pass a style prop to the component
<Button label="Label" type="button" style={{ background: 'red' }} />
You can pass a custom className prop:
In order to do so, you need to add the class in your 'plugins/users-permissions/admin/src/containers/Auth/styles.scss` file (where the component is going to be used)
.customButton {
background: red;
}
Then in your index.js file
import Button from 'components/Button';
import styles from './styles.scss';
render() {
return (
<Button label="label" className={styles.customButton} />
);
}
I'm using react-router-redux for navigation and have nested connect()ed components. This seems to work fine, except that my nested components don't re-render when the react-router route changes.
Specificallyl, in the structure below, App and Sidebar are connect()ed components and they both require information from state. When I click a Link in Sidebar:
a ##router/LOCATION_CHANGE action is firing,
I have react-router-redux's routerReducer being combined into my state so the state is updating,
App re-renders and the new route is shown,
but Sidebar doesn't re-render so the "active" Link isn't updated the activeClass is never changed.
What could be going wrong here?
Router
<Router component={App}>
<Route path="foo" component={Foo}/>
<Route path="bar" component={Bar}/>
<Route path="baz" component={Baz}/>
</Router>
App
<div>
<Sidebar/>
<div>
{children}
</div>
</div>
Sidebar
<nav>
<Link to="/foo" activeClass="active">Foo</Link>
<Link to="/bar" activeClass="active">Bar</Link>
<Link to="/baz" activeClass="active">Baz</Link>
</nav>
I had this same issue (not using Redux), and it seems to be React deciding not to call render again for your sidebar even though App re-renders. I fixed it by wrapping the Sidebar in withRouter which will cause Sidebar to re-render whenever your route changes.
Something like this:
import {withRouter} from 'react-router'
// or 'react-router-dom' on v4.x
class Sidebar extends Component {...}
export default withRouter(Sidebar)
this problem is well documented at react-router's guides page https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md#dealing-with-update-blocking
TL;DR make sure your components are location-aware. either by using sCU or HoC