I have a question on the way react components interact with each other. My question is this: say I have a child component called About.js, and I also have some sass styles lets say about.scss, in my about component I do a require(./about.scss) and import the styles i need for my component.
When I render in a parent component, does the about.scss styles conflict with the styles present in the parent.scss file?
What is the best way to go about styling individual components and setting up the file structure?
Thanks!
Yes, when you import your SCSS file from your React file, what webpack does is it take your SCSS file and transform it into CSS file, and wraps up the content with the style tag and inject it into your page, so at the end of the day, your DOM will look like this:
<style>
// parent.css
.conflict{
background: skyblue;
}
</style>
<style>
// about.css
.conflict{
background: hotpink;
}
</style>
And most React developers prefer method of styling a component is using the inline-style
const App () => (
<div
style={{
background: 'skyblue',
}}
>
</div>
);
Related
I want to change style of the Navbar imported component.
because I use it several time I want to give different style to it per time I importing that.
I am using styled-components to style and tried this way but it doesn't work :
import Navbar from "../components/navbar"
const StyledNavbar = styled(Navbar)`
background-color: black;
`
how can I give style to imported components by styled-components?
I am trying use inline css in html content but it shows the error you see in the picture below;
How can I use inline css in spfx webpart ?
<div className={`ms-Grid-col ms-u-md3`} style={{"border-color": "black"}}>
//Some Code
</div>
Simple way to do it is as follows,
It is not a good practice to do it. You should better use the sass files and define your styles there. Since this is not HTML, but JSX you can do something like this:
var style = {
color: 'white',
fontSize: 200
};
return <div style={style}> Have a good and productive day! </div>;
but this is not recommended. The code piece is not mine, but taken from this post React.js inline style best practices
I've been thinking of a way to include components of markup in a modular fashion. For example if I were to include a slider I would have to include the relevant css and JS for it to function correctly. Is there any known method of including these as one component?
<div> {{slider}} </div>
{{slider}} then would import slider.html, slider.css and slider.js but to their respective directories. css/slider.css and js/slider.js
Is this possible given our current array of production tools?
I am working with a node-backbone application. I create dynamic content and add jquery UI draggable to the content or elements I create. However, when my template system renders, my elements will not even move. The paths are correct. I use a class to make a reference to those elements and the draggable method.
Can someone tell me what is the correct way to include the jquery ui and jquery scripts so they load correctly?
layout jade - index.jade - template (extend layout) rendered in the index.jade
In my app I have a jquery module which is connected to backbone, but for some reason the jquery UI does not connect with it and consequently I have to add a jquery script next it. But then the jquery will not work when I create the dynamic elements with backbone into my templates. I use .html() to add them to template.
This is layout.jade
!!! 5
html(lang="en")
head
title project
meta(name='viewport', content='width=device-width, initial-scale=1.0')
link(rel='stylesheet',href='/styles/bootstrap.css')
link(rel='stylesheet',href='/styles/styles.css')
body
.navbar.navbar-inverse
.container
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.nav-collapse')
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='#')
img(src='/img/greatlogowhite.png', width='300')
.nav-collapse.collapse
ul.nav.navbar-nav
li.active
a(href='#')
img(src='/img/house.svg', width='70')
li
a(href='#about')
img(src='/img/pen.svg', width='70')
li
a(href='#contact')
img(src='/img/search.svg', width='70')
li
a(href='#contact')
img(src='/img/chat.svg', width='70')
This is index.jade
block content
block scripts
extends layout
block content
div#content
block scripts
script(data-main='js/boot', type='text/javascript',src='/js/libs/require.js')
script(type='text/javascript', src='http://code.jquery.com/ui/1.10.3/jquery-ui.js')
This is how I try to use jquery ui
<script>
$(document).ready(function() {
$( ".pic" ).draggable();
});
</script>
Actually, I made it to solve the problem. Whoever uses backbone, node.js, and require.js, remember to include jquery and jquery UI as libraries with require, and when creating dynamic elements with backbone such as:
$('#content').append(html); inside backbone call jquery UI
$('.drag').draggable();
My problem is that I want to overwrite a style of a site. Thing is, there is a way to do this, using the !important sentence, as seen in this example.
However, there are thousands of CSS instructions in my file, is there a more quick/efficient way to do this, i.e. not putting !important on each and every single line?
The approach I've found easiest and most effective is to wrap whatever html template you're injecting in a div with a very specific id.
<div id="my-specific-id">
// Your injected HTML template or section of the website you want to change
</div>
Once you've done this, reset all of the CSS that might affect that section.
#my-specific-id {
// A comprehensive CSS reset
}
// The rest of your CSS will override the reset above
Here is one such reset: http://html5doctor.com/html-5-reset-stylesheet/
Note that you probably won't need everything from the CSS Reset, so remove what isn't relevant to take some load off the browser. I can't imagine that you really want to reset figcaption, for example.
As someone writing an extension, you should care a lot about whether or not your extension ruins the user experience on websites you inject scripts into.
The approach I've outlined will guarantee that only the sections of the website that you specifically care about are changed.
You can do this with your own templates (say you wanted to add a weather widget to every page without using an iframe) or with specific parts of the page. You could, for example, wrap all <p> elements in a highly specific id that you define.
Here's an example using Sass from a recent project I've been working on...
#specific-id-css-ultimate-reset {
html, button, input, div, p, img, form {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
#import "modules/all";
#import "components/all";
#import "popups/all";
}
<div id="my-superspecific-html-template-wrapper">
<HTML TEMPLATE>
</div>
Maybe it will be faster for you to include all styles from the original CSS that you don't wish to override in your injected stylesheet? If so, you can then remove the original stylesheet from page using content script/code injection or blocking the browser request for CSS file.
You can also write a small script that does some regex magic and adds !important to every line of given CSS file.