I am very new to React, so I might be asking something really trivial, but after a while, it seems to me dark magic that I can't make something as simple as applying a style work properly.
I am following this tutorial, something easy. Until I get to the point where I need to apply styles. React consistently ignores all my styles.
The CSS I am using is straightforward, I changed also the background of the body to see if it works, but it is ignored:
*, *::before, *::after {
box-sizing: border-box;
};
body {
background-color: #ffa3a3; /*#f3f3f3;*/
margin: 100px;
}
.container.ql-editor {
margin-left: 10%;
margin-right: 10%;
}
Whereas the text editor JS file is almost like the tutorial:
import React, { useCallback } from 'react'
import Quill from 'quill'
import "quill/dist/quill.snow.css"
// import "./styles.css";
export default function TextEditor() {
const wrapperRef = useCallback((wrapper) => {
if (wrapper == null) return;
wrapper.innerHTML = "";
const editor = document.createElement("div");
wrapper.append(editor);
new Quill(editor, { theme: "snow" });
}, []);
return (
<div id="container" ref={wrapperRef}></div>
)
}
As you can see, out of desperation, I added the import of the CSS everywhere without any results. Also, changing to <div className="container" ref={wrapperRef}></div> does not help.
But I see that IDs work:
#container {
margin-left: 10%;
margin-right: 10%;
}
I have tried all the combination of classes, since the QuillJS version I have has a different HTML generation from the tutorial, in my version the outline of the HTML is:
<body>
<div id="root">
<div id="container">
<div class="ql-toolbar ql-snow">...</div>
<div class="ql-container ql-snow">
<div class="ql-editor ql-blank">...</div>
<div class="ql-clipboard">...</div>
<div class="ql-tooltip ql-hidden"></div>
</div>
What am I missing here?
Add a space between .container and .ql-editor
.container .ql-editor {
margin-left: 10%;
margin-right: 10%;
}
Without the space, the selector targets all elements with both 'container' and 'ql-editor' class.
With the space, the selector targets all elements with class 'ql-editor' that are descendents of an element with class 'container'
Related
I am using an imported component which I can't change.
This component has a lot of nested divs.
Somewhere deep in these divs, I need to add a bottom margin to it.
Via Chrome DevTools, I am able to add the margin in one of the divs and achieve the
margin I want. But unable to get it to work when I try to add my css into my scss file.
How can I do this?
const MyComponent = props => {
return (
<div>
{/* This component is not in my control. I can't modify this component*/}
<ImportedComponent/>
</div>
);
};
When I see it in Chrome DevTools, the CSS is something like this.
If I were to add a margin style near the aCssClass or within the block of aCssClass via Chrome,
I get the margin I need. But as said, able to achieve in Chrome DevTools, but not via my scss file.
<div class="my-own-class">
<!-- This is all coming from ImportedComponent, each div has some css class -->
<div>
<div>
<div class="aCssClass anotherClass"> <!-- i want to be able to add my margin here, able to do it but only via Chrome dev tools-->
<div>
<div>
Some data
</div>
</div>
</div>
</div>
</div>
</div>
These are the styles I tried which makes no difference.
.my-own-class {
margin-bottom : 1em;
}
.my-own-class > div:nth-child(3) {
margin-bottom : 22px;
}
.my-own-class body .aCssClass {
margin-bottom: 22px;
}
body .aCssClass {
margin-bottom: 22px;
}
body > .aCssClass {
margin-bottom: 22px;
}
.my-own-class .aCssClass {
margin-bottom: 22px;
}
.my-own-class > .aCssClass {
margin-bottom: 22px;
}
Screenshot
At the highlighted portion, I added margin-bottom 10px under body .sc_marginRight_0 on the right panel which works.
i think it's just a specificity problem, try adding !important and it will work just fine.
.my-own-class .aCssClass {
margin-bottom: 22px !important;
}
I am passing various amounts of data in react markdown sich as tables, lists and h tags. I wanted to know how to style each element separately. I searched everywhere but there is no mention of how to style the elements other than just bold or emphasize, etc. I thought I could pass a class name in the ReactMarkdown component to style it but would that not just provide styling only for the component. How do I style the various elements within it?
const ReadMePreviewer = ({ readMeCode }) => {
return (
<ReactMarkdown
plugins={[[gfm, { singleTilde: false }]]}
className={style.reactMarkDown}
// className={style.reactMarkDownRemovingExtraGlobal}
renderers={renderers}
source={readMeCode}
/>
);
};
This is how I would make it work for me. I do it explicit with CSS and not, e.g., SCSS or CSS-in-JS so as not to bother you with extra libraries nor webpack/babel finetuning:
Create a separate markdown-styles.module.css CSS-module file with your styles, e.g.,
.reactMarkDown {
// some root styles here
}
.reactMarkDown ul {
margin-top: 1em;
margin-bottom: 1em;
list-style: disc outside none;
}
.reactMarkDown ul li {
margin-left: 2em;
display: list-item;
text-align: -webkit-match-parent;
}
// your other styles but all under .reactMarkDown blocks
Then you can import it in your component and use as you did:
import style from './markdown-styles.module.css';
...
const ReadMePreviewer = ({ readMeCode }) => {
return (
<ReactMarkdown
plugins={[[gfm, { singleTilde: false }]]}
className={style.reactMarkDown}
renderers={renderers}
children={readMeCode}
/>
);
};
This seem to work to wrap into new line
App.css
.markdown code {
display: block;
white-space: pre-wrap;
}
Component:
<ReactMarkdown className="markdown">{page.Content}</ReactMarkdown>
I am about to finish a small database of images of vessels. As you can see from the screenshot below, the problem I have is that the cards are all different sizes despite I fix the css classes to a specific width. I am trying to have all the card of same width and height. What am I doing wrong?
Below the snippet of code related to this problem:
vessels.js
export default function Vessel({ vessel }) {
const { name, slug, images /* size */ } = vessel;
return (
<div>
<article className="room">
<div className="img-container">
<img src={images[0] || defaultImg} alt="single" />
<Link to={`/vessels/${slug}`} className="btn-primary">
Features
</Link>
</div>
</article>
</div>
);
}
And the related App.css classes:
.room {
display: block;
box-shadow: var(--lightShadow);
transition: var(--mainTransition);
}
.img-container {
position: relative;
}
.img-container img {
width: 100%;
display: block;
transition: var(--mainTransition);
}
What I have done so far:
I have been trying to research and figure out the problem of why that is happening but couldn't understand what I am doing wrong. I consulted this source which seems to be pretty clear. I apply and the result I have is the one on the image I posted.
I tried also to add the height property on the css but that didn't change the problem
.img-container img {
width: 100%;
height: 100%;
display: block;
transition: var(--mainTransition);
}
At a certain point I suspected it was a probelm of visibility but that also didn't change the issue I have. And I think it is not a problem of visibility property.
It seems to me that there is a (probable?) property that could be overwritten? Or maybe that is not the problem.
Thanks for pointing to the right direction on how to solve this issue.
Try using flexbox and styled components for your desired design.
Example:
import React from "react";
import styled from "styled-components";
import "./styles.css";
const BoatContainer = styled.div`
display: flex;
flex-flow: row wrap;
`;
const BoatImg = styled.img`
width: 200px;
margin: 5px;
`;
export default function App() {
return (
<div className="App">
<h1>Behold: boats.</h1>
<BoatContainer>
<BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Motorboat_at_Kankaria_lake.JPG/1920px-Motorboat_at_Kankaria_lake.JPG" />
<BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Boats_at_Bhimili_beach_in_Visakhapatnam.jpg/1280px-Boats_at_Bhimili_beach_in_Visakhapatnam.jpg" />
<BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Motorboat_at_Kankaria_lake.JPG/1920px-Motorboat_at_Kankaria_lake.JPG" />
<BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Boats_at_Bhimili_beach_in_Visakhapatnam.jpg/1280px-Boats_at_Bhimili_beach_in_Visakhapatnam.jpg" />
<BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Motorboat_at_Kankaria_lake.JPG/1920px-Motorboat_at_Kankaria_lake.JPG" />
<BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Boats_at_Bhimili_beach_in_Visakhapatnam.jpg/1280px-Boats_at_Bhimili_beach_in_Visakhapatnam.jpg" />
</BoatContainer>
</div>
);
}
Sandbox demo: https://codesandbox.io/s/stack-63731876-boats-e7onm
Here's a handy CSS Tricks guide to flexbox for reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have been struggling with this for a quite some time now, and i couldn't find a sufficient answer. Basically i have one parent component which html goes as follows:
<div class="container">
<child-one></child-one>
<child-two></child-two>
</div>
the problem is that the child-one component has its size set as auto, with some padding to look good,
child-one {
width: auto;
height: auto;
padding: 0.5rem;
}
and child-two has a fixed width and height in it's own scss.
child-two {
width: 10rem;
height: auto;
}
is there a way to somehow change the width of child-two in the parent without editing the child-two?
I was hoping for something along the lines of storing the width of the child-one, and setting the width of child-two to the same value.
child-one {
width:auto;
padding: 0.5rem;
$width: this.width !global //idk about this one
}
child-two {
width: $width
padding: 0.5rem
}
please note that the child-one and child-two scss don't look this way in the code, and are normally written, this is just for the purpose of simplifying the question
Is this what you are looking for?
app.component.html - Parent Component
<child-one #childOne></child-one>
<child-two #childTwo></child-two>
<br>
<button (click)="changeWidth()">Change child two width</button>
app.component.ts
export class AppComponent {
#ViewChild('childOne', {
read: ElementRef
}) childOne: ElementRef;
#ViewChild('childTwo', {
read: ElementRef
}) childTwo: ElementRef;
constructor(private renderer: Renderer2) {}
changeWidth() {
const childOneWidth = this.childOne.nativeElement.getElementsByClassName('child-one')[0].offsetWidth;
const childTwoElement = this.childTwo.nativeElement.getElementsByClassName('child-two')[0];
this.renderer.setStyle(childTwoElement, 'width', `${childOneWidth - 2}px`);
}
}
Here is the working Stackblitz
Suggestion
#SivakumarTadisetti's suggestion is a valid suggestion, alternatively, you could use ngStyle to provide dynamic styling for the component or ngClass for conditionally applying style class to the component. You could, which requires more code, also write a directive that changes the style behaviour of the component based on certain conditions.
Example using ngStyle
https://stackblitz.com/edit/stack-help-01
I'm trying to create a HTML widget:
HTML:
<div>
<h1 class="title" data-bind="title">Title</h1>
<div>
<h1 id = "dc1" class="dc">DC1</h1>
</div>
<div>
<h1 id = "dc2" class="dc">DC2</h1>
</div>
<p class="updated-at" data-bind="updatedAtMessage"></p>
</div>
And I need to be able to set the background color of the id="dc1" and id="dc2" elements dynamically in CoffeeScript. I plan to do this by adding a class with a background color setting:
SCSS:
&.up {
background-color: green;
}
&.down {
background-color: red;
}
.dc {
background-color: orange;
font-size: 30px;
float: left;
width: 50%;
}
So far I have managed to set the whole widget background but not the child elements mentioned above:
I have been using:
CoffeeScript:
$(#node).removeClass('up down')
$('#dc1').removeClass('up down')
$('#dc2').removeClass('up down')
$(#node).addClass('down')
$('#dc1').addClass('down')
$('#dc2').addClass('up')
Note ultimately I will add the classes depending on some data rather than hard coding them to 'up' or 'down' in the coffeescript.
But nothing happends.. Am I getting selecting the id="dc#" elements correctly?
If it helps with context I'm doing this for Dashing
Your SCSS doesn't make sense so I'd guess that your missing an error from the SCSS-to-CSS conversion. An & in SCSS is a reference to the parent selector:
& will be replaced with the parent selector as it appears in the CSS
so have &.up at the top level makes no sense and should generate an error. If we fix the SCSS so that .up and .down apply only to .dc:
.dc {
/* ... */
&.up {
background-color: green;
}
&.down {
background-color: red;
}
}
then everything seems to work just fine.
Demo: http://jsfiddle.net/ambiguous/9y9uywm9/
You can use Sassmeister (and other similar online tools) to see what SCSS thinks of your original SCSS.