We are using styled-components in the project and we are wondering if there is a way to have a full styling capability of react-select V2. I mean it's certainly possible to use objects to define styling, but it feels rather inconsistent and makes a bit worse DX.
From my understanding, the styled-components work by creating generated className and attaching to elements. That would essentially mean I would have to use components prop anytime I need to eg. change text color. I cannot use styles if I want to avoid object CSS-in-JS. Is that correct?
Simply put, if the component you want to style with styled-components accepts a className property, it can be styled with it using the styled(Component) syntax.
I see react-select accepts className for every component, so it should work fine.
ex:
import Select from 'react-select';
import styled from 'styled-components';
styled(Select)`
background-color: red;
font-size: 20px;
`;
Related
I am using the particles component from react-tsparticles and it takes in a props called styles and canvasClassName - where you can give it a class name (and not an object of styles).
I can use the makestyles to create a style class that I can pass to the canvasClassName however that is deprecated so what is the alternative for v5?
I need to use the theme values from mui so putting the styles into a .module.css file isnt an option
Is there any way to target some components from react-bootstrap in CSS. For my application, I'm using Modals from react-bootstrap and I need to change some style on all of them and it will be annoying if I need to change every single one individually.
Yes, it is possible, however you will need to inspect the Modal using ChromeDevTools or the like and see what classes are applied to the Modal when it is displayed. For example, when I inspected the Modal from react-bootstrap, I noticed the styles applied to the heading were given the className of "modal-header". So I created a Modal.css file and added the following code to it:
.modal-header {
background-color: red;
}
Then, I imported "./Modal.css" into the Modal.js file or wherever you've defined or using your Modal. Finally, when I opened the Modal, the heading had a background of red color so to speak.
Please note that it can be a little difficult to override bootstrap styles sometimes.
I would like my React Data Table to have Material Ui classes so it can work better with the rest of my App. It was mentioned in the docs that you can override the css with styled components but I have not managed to do that nor found an example.
i would like to add Mui class names to the rtd class names for example:
<div class="rdt_TableCell"/>
should be
<div class="rdt_TableCell MuiTableCell"/>
link to mentioned feature:
https://www.npmjs.com/package/react-data-table-component#css-overrides
some basic sandbox to play around with:
https://codesandbox.io/s/react-data-table-materialui-9iebe
The react-data-table-component library does not currently provide any way to customize a cell's classname. When it refers to overriding CSS using styled-components, it means an approach like the following:
const StyledDataTable = styled(DataTable)`
& .rdt_TableCell {
background-color: lightblue;
}
`;
This lets you customize the CSS properties associated with the rdt_TableCell class, but doesn't give you any easy way to leverage the Material-UI TableCell styles except by copying them.
I'm learning how to style React components and use npm to import libraries that i can use to do different things. I have imported react-shadow-text and tried to implement a simple h1 with text shadow. When attempting to style it, all of my styles work but when I center the text within the component, the shadow does not center along with the text. If i do not center the text and i resize the browser. the shadow stays with the text as you would expect but as soon as you apply justify-content, text-align, or any centering property to the component, the text will center itself but the shadow remains to the left and the shadow does not stay in the center with the text and instead remains to the left during resizing, making itself further away from the text.
I have tried using flexbox centering and i've also tried without flex. I've also tried to style the component with different styling techniques such as css modules and inline styles. I'm sure it's something simple, but i can't really find anything on the issues specifically regarding this particular library without using native.
import React, { Component } from 'react';
import ShadowText from 'react-shadow-text';
import styles from '../Name.css'; //imported stylesheet working
import styled from 'styled-components';
//import styles from '../Name.css';
class Name extends Component {
render() {
return(
<ShadowText className="name" theme={{
shadowTextColor: 'Black',
shadowTextShadowColor: 'Black',
shadowTextShadowBlur: '6px',
shadowTextXTranslate: '0px',
shadowTextYTranslate: '15px',
textShadowOffset: '0px', //tried messing with this
shadowTextTransitionDuration: '0.4s',
shadowTextTransitionTiming: 'ease-in-out',
}}>
Larry Young
</ShadowText>
);
}
}
export default Name;
And CSS
.name {
font-size: 2.5em;
font-family: 'Cinzel';
width: 100vw;
height: 20vh;
text-align: center; //problem child. without this, text stays to the left
//but shadow attaches itself to text. When this is
//added, or justify content is added, text detaches
//from shadow effect. Positioning issue maybe?
}
I've tried using anchorShadow prop built in to the npm library and setting it to true and it just flips the text and the shadow and does the same thing, but the shadow stays in place and the text moves...I've also tried CSS Modules css.js as well and inline styles. I guess I could try using raw text-shadow css but it kind of defeats the purpose in learning this particular library. I assume lack of experience with React is what's biting me. Thanks everyone.
I have noticed that when the react-text-shadow library adds the shadow, it does so in a seperate div that is absolute positioned. If I take away the positioning in dev tools, the shadow leaps to the center. So i tried isolating that class in index.css in the create-react app environment and changed the position value. When doing so, it worked, until I tried to edit the shadow offset to line it up more precisely. As soon as I changed the properties to control shadowTranslateXorY and reload, it generates a new class for the shadow, which negates the positioning change I made in the master index.css file. For now, I will just use CSS text-shadow. Putting text-shadow into the css file for the component, importing it into the component, and referencing to it with className is working fine. Hopefully someone else knows a little bit more about this particular library. I can't seem to find much documentation about it, aside from what is on the NPM page when you install.
I wanted to manually changed the font size for a ReactJS project. I tried to add something like
* {
font-size: 10px;
}
and that works with everything that is a plain text. However, every component from react-bootstrap (e.g., DropdownButton, Panel) remains a large font size. Thus, what is the correct way to change the font size for those react-bootstrap components to the same as for other plain text? Inline styling works but I would like the changes to apply to a .css file. Thanks!
Edit: Panel Header code snippet:
<Panel>
<Panel.Heading>
<Panel.Title>
title here
</Panel.Title>
</Panel.Heading>
...
To change the font-size of all text in your project, use
* {font-size: 10px;}
Alternatively, you can pass a style prop to a component, EX: <Panel.Body style={{fontSize: 10}}
It's simple you can add style={{fontSize:"10px"}} inside the jsx button or any element, this will directly apply to your jsx element and bootstrap default won't work.