Develop Reference

How can I customize the checked state of a checkbox when using svgr in React?

I'm working on a React project and I'm using styled-component and typescript.
I'm customizing the checkbox like this:
Source
import React, { ReactElement } from 'react';
import styled from 'styled-components';
import IconChecked from '#assets/Icons/ico_checked.svg';
interface Props {
id: string;
}
const StyledCheckBox = styled.input`
box-sizing: border-box;
width: 20px;
height: 20px;
background: #ffffff;
border: 1px solid #d4dae4;
border-radius: 4px;
appearance: none;
&:checked {
background-image: url(${IconChecked});
background-repeat: no-repeat;
background-color: #ffffff;
background-position: 50%;
}
`;
const CheckBox = ({ id }: Props): ReactElement => (
<StyledCheckBox type="checkbox" id={id} />
);
export default CheckBox;
Question
To use the svg icon without the <img> tag, I installed the svgr package and set it as an svg type loader through webpack.
The problem is that svgr has the logic to convert svg to component, so I can't set the checked icon in the following way.
&:checked {
background-image: url(${IconChecked});
...
}
As a result, the check icon(IconChecked) does not appear when I click the checkbox after using svgr. How can I solve this?

You can move your ico_checked.svg file to public folder and use the svg directly from the url like this:
&:checked {
background-image: url("/ico_checked.svg");
...
}
You can take a look at this sandbox for a live working example of this approach.

Logic to render a component only once

I need help with creating a logic for my React component. If the divider line appears once on the page it should not be rendered again.
So, if I add the component to the page it styles the text underneath. But if I try to add the component again to the page, the divider line/styling should be ignored. I should only be able to add it once
This is my code:
import React from 'react';
const Divider = () => (
<>
<hr className="divider"/>
</>
);
/* Seperate css file */
hr.divider {
height: 0;
border: 0;
border-top: solid 1px #cdcdcd;
}
hr.divider ~ p.story-text {
font-size: 0.90rem;
font-weight: normal;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
line-height: 1.75rem;
color:#707174;
#include text-styles(.75rem, 1.75em, "Gordita");
#include breakpoint(tablet) {
#include text-styles(.90rem, 2em, "Gordita");
}
}
hr.divider ~ p.story-text:last-of-type {
border-top: solid 1px red;
}

You need to use the component LifeCycle tools provided by ReactJS. ComponenDidMount() loads the only once when the class is loaded but the render() function is called on each action of the user or the app. Here is a link to ReactJS docs telling how to use ComponentDidMount(): https://reactjs.org/docs/react-component.html#componentdidmount

It may be better to add a condition in the parent component (the one that calls Divider), but given the current snippets:
const Divider = () => (
let dividers = document.getElementsByClassName('divider')
if (dividers.length > 0) {
return null
} else {
return <hr className="divider"/>
}
);
This will not stop your component from rendering. It will only stop more than one hr from rendering.

How to use the :first-of-type rule inside a styled-components/emotion partial?

I'm trying to replicate some CSS in Emotion using Partials but I don't see how it's possible to replicate a rule like :first-of-type in a situation where I'm using a partial. Is there some way to achieve this?
Starting CSS:
li.item {
background: white;
border: 1px solid;
}
li.item.isResult:first-of-type {
background: pink; /* Don't know how to port this rule */
}
Best attempt at porting this rule to Emotion:
import styled from '#emotion/styled';
import { css } from '#emotion/core';
const Item = styled.li`
background: white;
border: 1px solid;
${resultPartial}
`
const resultPartial = props => props.isResult && css`
&:first-of-type {
background: pink; // Has no effect
}
`
PS: Although partials don't seem to be mentioned in Emotion's docs, they are supported and do work. I'm specifically wondering about how to go about recreating a :first-of-type rule inside a partial.

Not a solution, but an explanation why it doesn't work.
const Div = styled.div`
color: black;
&:first-of-type {
color: red;
}
`;
Generates CSS like this:
.HaSh{color: black}
.HaSh:first-of-type{color: red}
However, the CSS spec only allows "type" to be a tag name for first/nth/last/only-of-type. Yet, styled-components relies and must rely on class names to distinguish differently styled div's. Thus, a dead end.
I believe you can work around the limitation (in general) by setting the style on any "parent's child", e.g.:
const Comp = () => <Container><p>1</p><p>2</p></Container>;
const Container = styled.div`
& > *:first-of-type {
color: red;
}
`;

Getting JQuery to create multiple buttons that are styled in a group with CSS

So fair warning, I'm a novice when it comes to most things-JS.
I'm working on a unique project wherein I am customizing the visual appearance of a sub-section of a website for a product my company owns. I cannot alter the HTML code of the pages (for reasons above my pay-grade), so everything I'm adding/changing is being done through a combination of JS and CSS.
My issue is that I have created a series of buttons which I have organized into a group in CSS. I am placing the buttons on the page using JS, with functions for what each button is supposed to do (generally just navigating to a URL), and then further modifying the location of the button group via CSS. I was able to do this easily enough when the buttons were not grouped using CSS, but then I realized I needed the buttons organized seamlessly next to each other, while using the margin-left property to slide the group as a whole to a specific part of the page.
The JS code looks like this:
<script type="text/javascript">
$( document ).ready(function() {
$('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
}
);
function goHome() {
window.location.href = 'https://www.home-page.org/';
}
$( document ).ready(function() {
$('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
}
);
function contact() {
window.location.href = 'https://www.home-page.org/contact/';
}
The CSS looks like this:
.toolbar-btn-group .toolbar-btn {
display: inline-block;
padding: 15px 25px;
font-size: 10px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #ffffff;
background-color: #780a29;
border: none;
float: left;
}
.toolbar-btn-group .toolbar-btn:hover {background-color: #490619
}
.toolbar-btn-group {
margin-left: 25%;
}
The output result is just generic buttons with no styling, and not on the screen where I want them (they're appended correctly, they just aren't sliding to the right due to the lack of CSS stlying). They function correctly, but that's it.
If I've understood my own code correctly, what's happening is that the JS is creating the buttons, assigning them as the toolbar-btn class, and appending them to the #productToolbar div. They are not receiving the .toolbar-btn CSS styling, because they are a child of the .toolbar-btn-group class.
What I don't know how to do though, is write JS code that will create the group of buttons with the requisite number of buttons that will receive the CSS styling (assuming it's possible).

The easiest solution, assuming this doesn't mess up other layout in the page, would be to add that .toolbar-btn-group class to the container while you're at it:
$(document).ready(function() {
$('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
$('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
$('#productToolbar').addClass('toolbar-btn-group'); // <-- here
});
.toolbar-btn-group .toolbar-btn {
display: inline-block;
padding: 15px 25px;
font-size: 10px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #ffffff;
background-color: #780a29;
border: none;
float: left;
}
.toolbar-btn-group .toolbar-btn:hover {
background-color: #490619
}
.toolbar-btn-group {
margin-left: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="productToolbar"></div>
If that would cause problems -- i.e. if you don't want some or all of the toolbar-btn-group styling to affect the product toolbar -- you may need to just duplicate the CSS specifically for the product toolbar element:
#productToolbar .toolbar-btn {
display: inline-block;
padding: 15px 25px;
/* ...etc... */
}
Far from ideal, of course, but so's the whole situation. (I sympathize. Been there too.)

How to prevent outside CSS from adding and overriding ReactJS component styles

I have a custom ReactJS component that I want to style in a certain way and provide as a plugin to many different web sites. But when web sites use global styles (Twitter bootstrap or another css framework) it adds and overrides styles of my component. For example:
global.css:
label {
color: red;
font-weight: bold;
}
component.js:
class HelloMessage extends React.Component {
render() {
let style = {
color: "green"
};
return (<label style={style}>Hello</label>);
}
}
result:
Above I didn't use "font-weight: bold" in my component's style but in result my component is using it.
I'd like to be able to encapsulate my custom components's styles in a way that makes them look the same across all the web sites.

The best approach in my view is to define some kind of reset class for your component and put in a set of css resets you can find out there
(e.g. http://meyerweb.com/eric/tools/css/reset/)
The definition in a sass file could look like this:
.your-component-reset {
div, span, object, iframe {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
// add some more reset styles
}
To avoid writing a lot when you don't want to use sass just use the universal selector *:
.your-component-reset * {
margin: 0;
padding: 0;
font-weight: normal;
// other reset styles ...
}