I want to make all of my elements border-box. I want to do this:
* {
box-sizing: border-box;
}
How is that possible to do in with React's inline styles? I don't want to write that rule in each component...
This is ill-advised since CSS will be much more efficient, manageable, and flexible. But if you REALLY wanted to have global inline React styles, I might do it like this:
var App = React.createClass({
globalStyle: {
boxSizing: "border-box"
},
render() {
return (
<div>
<MyComponent globalStyle={this.globalStyle} />
</div>
);
}
});
var MyComponent = React.createClass({
style: {
border: "1px solid black"
},
render() {
return (
<div style={Object.assign({}, this.props.globalStyle, this.style)}></div>
);
}
});
Basically pass global style down to components as props and have them incorporate it there.
Note that Object.assign()'s first parameter is a new empty object (so that we don't accidentally mutate our others) and that this.style comes last (so that it overrides any global styles.)
If you wanted the global style to change, you'd do it with React's component state instead and use getInitialState etc. I suppose that might actually be the only reason you'd want to do it this way.
Related
const Component = () => <CustomButton color="highlight">Click me</CustomButton>;
const colors = { highlight: "#123456" };
export const CustomButton = styled(Button)`
${({ props }) =>
color: ${colors[props.color]}};
`;
How can I prevent React form rendering "color="highlight" as an inline style in line 1?
I sometimes use CSS named properties to use them within my CSS in JS library as props (styled components in this case).
React renders this HTML, though:
color="highlight" is not valid HTML and displays no color.
Since color="highlight is rendered as an inline style, my styled components stylesheets are not working anymore and the styles are broken.
The correct output should be
// no inline styles applied
<button class="sc-crzoAe dV0xyD sc-cTJkRt jDcPXG" />
// corresponding style sheet class
.sc-crzoAe {
color: #123456;
}
Keep in mind that React handles some CSS properties like width, height as a shortcut to style={{ width: "100%", height: "50%" }}. That's where the behaviour comes from I think.
One idea I had was to just rename the prop, but it would be nice to have a prop called color to take care of the color.
The correct way to set color is this:
export const CustomButton = styled(Button)`
color: => ${(props) => colors[props.color]};
`
An example can be shown here
The docs for styled-components show its default styled export accepts a single argument:
styled
This is the default export. This is a low-level factory we use to create the styled.tagname helper methods.
Arguments
component / tagname
Description
Either a valid react component or a tagname like 'div'.
I've emphasized "valid react component" here because they explicitly aren't saying this has to be a React component created by styled, although traditionally that is how this is used (as well as documented under their Extending Styled section). An example of this is shown below:
const RedBox = styled.div`
border: 1px solid black;
color: red;
`;
// Traditionally, the argument you pass to `styled` is
// a react element *created by a previous `styled` call*
const BlueBox = styled(RedBox)`
color: blue;
`;
function Example() {
return (
<div>
<RedBox>I am a red box</RedBox>
<BlueBox>I am a blue box</BlueBox>
</div>
);
}
ReactDOM.render(<Example />, document.getElementById('root'));
<script src="https://unpkg.com/react#17.0.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-is#17.0.1/umd/react-is.production.min.js"></script>
<script src="https://unpkg.com/styled-components#5.2.1/dist/styled-components.js"></script>
<div id="root"></div>
Nothing unsurprising with the above.
However, my question is what if you pass a non styled component as the argument to the styled call? Shouldn't that returned element also get the styles applied?
Consider the following simple example:
// Create two simple components, one functional, one class-based
const BoxFunctional = (props) => <div>{props.children}</div>;
class BoxClass extends React.Component {
render() {
return <div>{this.props.children}</div>
}
}
// Here, I pass a functional React Component to `styled`
const RedBoxFunctional = styled(BoxFunctional)`
color: red;
border: 1px solid black;
`;
// Again, passing another regular React component, this time a class component
const RedBoxClass = styled(BoxClass)`
color: red;
border: 1px solid black;
`;
function Example() {
return (
<div>
<p>The below two Boxes are regular react elements:</p>
<BoxFunctional>I am a functional box</BoxFunctional>
<BoxClass>I am a class box</BoxClass>
<hr />
<p>The below two boxes <em>should</em> be styled:</p>
<RedBoxFunctional>I am a functional red box</RedBoxFunctional>
<RedBoxClass>I am a class red box</RedBoxClass>
</div>
);
}
ReactDOM.render(<Example />, document.getElementById('root'));
<script src="https://unpkg.com/react#17.0.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-is#17.0.1/umd/react-is.production.min.js"></script>
<script src="https://unpkg.com/styled-components#5.2.1/dist/styled-components.js"></script>
<div id="root"></div>
Running the above snippet you can see that the styled components are not styled, despite them extending a "valid" react component.
Is there something I'm missing? Are the docs just incorrect? Can styled only apply styles to an existing react component that is made by a previous styled call?
I don't really know where the confusion lies, you can pass any React component to the styled Higher Order Component.
The issue you have is that you aren't trying to style the BoxFunctional or BoxClass components, but rather you are trying to style the JSX they render. You just need to proxy the className prop through to what each renders.
Styling any Component
The styled method works perfectly on all of your own or any
third-party component, as long as they attach the passed className
prop to a DOM element.
const BoxFunctional = (props) => (
<div className={props.className}>{props.children}</div>
);
class BoxClass extends Component {
render() {
return <div className={this.props.className}>{this.props.children}</div>;
}
}
Demo
I need to pass custom CSS properties inline to a React component (Google Model Viewer in this instance),combined with more run-of-the-mill styles (background width, height etc.). There's quite a lot of questions on using custom properties inline with react, but I couldn't see one for specifically combing the properties with other styles.
I have the styles here, with the commented out style being an example of the custom property.
const styles = {
width: "100%",
height: "100%",
background: this.props.background,
// "--progress-bar-height": this.props.progressBarHeight
};
The const gets passed into rendering the component:
return (
<model-viewer
style={styles}
</model-viewer>
How do I combine the usual inline styles with the custom properties to add inline?
I tried adding it as a variable (as seen elsewhere on SO):
const progressBarHeight={ "--progress-bar-height": this.props.progressBarHeight };
But wasn't sure how to combine that with the {styles} . I tried longhand declaring each style and adding the variable to the list, but that didnt work either:
style={{ background: styles.background, width: styles.width, height: styles.height, progressBarHeight }}
Any tips?
You can simply use object spreading for this
style={{...styles, ...progressBarHeight }} // progressBarHeight = { "--customrvar" : '1px'}
Here's a working demo
Shouldn't a simple object map work?
Here is a sample code -
const styles = {
width: "100%",
height: "100%",
background: "this.props.background",
//"--progress-bar-height": "black"
};
const props = {
"--progress-bar-height": "white"
}
for(let i in props)
{
styles[i] = props[i];
}
for(let i in styles)
{
console.log(styles[i]);
}
And then the resulting combined style goes into props of your component.
I would like to add and remove 'over' from my class on an element created using a lit-html template triggered by 'dragEnter' and 'dragLeave':
#app {
background-color: #72a2bc;
border: 8px dashed transparent;
transition: background-color 0.2s, border-color 0.2s;
}
#app.over {
background-color: #a2cee0;
border-color: #72a2bc;
}
const filesTemplate = () =>
html`
<button id="app"
#dragover=${??}
#dragleave=${??}
>
Click Me
</button>
`;
In my old system I called these methods in a separate module via an event emitter, but I am hoping I can make it all defined in the template using lit-html.
dragEnter(e) {
this.view.element.className += ' over';
}
dragLeave(e) {
this.view.element.className = element.className.replace(' over', '');
}
It depends what your custom element looks like. With your template you could just put #dragover=${this.dragEnter}. However, if you want this to apply to your entire custom element and not just the button you can do something like this:
connectedCallback() {
super.connectedCallback();
this.addEventListener('dragover', this.dragEnter);
}
If you do not have custom element and just use lit-html by itself you have to put your event handlers dragEnter(e)and dragLeave(e) into the template like so: #dragover=${this.dragEnter}
You need to add the class with classList.add in dragEnter and remove it in dragLeave. In the future you maybe can use classMap directive in lit-html, however there is nothing wrong with just using classList. I would stick with just using classList. In a very distant future css might also have a selector for it: Is there a CSS ":drop-hover" pseudo-class?
I think that, in order to solve the problem in a "lit-html style", the solution has to be something like this:
import { html, render} from 'lit-html';
import { classMap } from 'lit-html/directives/class-map.js';
const myBtnClasses = {
over: false
};
function dragEnter(e) {
myBtnClasses.over = true;
renderFiles();
}
function dragLeave(e) {
myBtnClasses.over = false;
renderFiles();
}
const filesTemplate = (classes) =>
html`
<button id="app" class="${classMap(myBtnClasses)}"
#dragover=${dragEnter} #dragleave=${dragLeave}
>
Click Me
</button>
`;
function renderFiles() {
render(filesTemplate(myBtnClasses), YOUR_CONTAINER);
}
When using lit-html you have to express your UI as a function of your "state" and "rerender" each time your state changes, so the best solution in this little example is to consider your classes as part of your state.
Anyway better than
this.view.element.className += ' over';
is
this.view.element.classList.add('over');
And instead
this.view.element.className = element.className.replace(' over', '');
use
this.view.element.classList.remove('over');
This is better because of allowing to avoid many bugs like adding the same class many times.
I do not know lit-html but try
let sayHello = (name, myClass) => html`<h1 class="${myClass}">Hello ${name}</h1>`;
https://lit-html.polymer-project.org/
As an example, let's say I've a component that can take in props like this:
const testComponent = (props: {isBold: boolean}) => {
if(props.isBold)
return <strong><div>hello</div></strong>
return <div>hello</div>
}
In this case, my example component that can take in props and the result depends on the props given to it.
Now, if I extend this component in styled-components, how can I pass my props into the base component? The idea is something like this:
const styledTestComponent = styled(testComponent({isBold: true}))`
width: 100%;
opacity: 0.5
/* etc etc... */
`
Well, obviously not going to work. This part will fail: styled(testComponent({isBold: true}))
But the idea is that what I want to do is to use CSS to style a particular instance of a component. So in that case, I will need to pass a pre-defined props to the base component, testComponent.
How can I achieve this?
Update:
I've come up with a quick example to illustrate the issue. The code below attempts to style a react component MyCustomImage as a styled-component StyledMyCustomImage. When this is run, you can see that StyledMyCustomImage does render itself as MyCustomImage. However, the CSS styles are not applied.
const MyCustomImage = props => (
<img
src={`https://dummyimage.com/${props.width}x${props.height}/619639/000000`}
/>
);
const StyledMyCustomImage = styled(MyCustomImage)`
border: 2px dotted red;
`;
function App() {
return (
<div className="App">
<h3>Test passing props from styled component to base component</h3>
<StyledMyCustomImage width="600" height="400" />
</div>
);
}
I've created a sandbox for this demo: https://codesandbox.io/s/k21462vjr5
Update 2:
Oh! Thanks to #SteveHolgado's answer, I've gotten it to work! I didn't know styled component will pass the CSS as a prop to its base component! Here's the code after adding in the class name for future reference:
const MyCustomImage = props => (
<img
src={`https://dummyimage.com/${props.width}x${props.height}/619639/000000`}
className={props.className}
/>
);
const StyledMyCustomImage = styled(MyCustomImage)`
border: 2px dotted red;
`;
The sadnbox of the working demo: https://codesandbox.io/s/j4mk0n8xkw
Try this, it should work
const StyledTestComponent = styled(testComponent)`
width: 100%;
opacity: 0.5
/* etc etc... */
`
and pass the prop to instance in this way.
<StyledTestComponent isBold />
Feedbacks are welcome. I have not checked it working, but feels it will work
Note: I checked and it's working. Should work for you.
When you use the styled function like that, your wrapped component will get passed a prop called className, which you need to apply to the element that you want the styles to affect:
const testComponent = (props) => {
return <div className={props.className}>hello</div>
}
You will have access to all props in your styles, which you can use like this:
const styledTestComponent = styled(testComponent)`
width: 100%;
opacity: 0.5;
font-weight: ${props => props.isBold ? "bold" : "normal"};
/* etc etc... */
`