I'm using react-sortable-tree library with typescript and react-sortable-tree-theme-minimal and I got this result
I need to make a small space between the arrow and the title like this
See the defense between Tokyo and Jászárokszállás
I add .less file with styling code
.rstcustom__rowTitle {
margin-left: 1% !important;
font-weight: lighter !important;
color: red !important;
}
and import it into my component import '../view/LayoutDepartmentSettings/Style.less';
and use it with the tree
<SortableTree
rowHeight={50}
treeData={this.state.treeData}
onChange={this.updateTreeData}
canDrag={false}
className={"rstcustom__rowTitle"}
.......
but the style doesn't change and the tree didn't affected.
please tell me where is my error
Add style inside your component that will help you.
<SortableTree
rowHeight={50}
treeData={this.state.treeData}
onChange={this.updateTreeData}
canDrag={false}
className={"tree"}
style={{marginLeft:3,fontWeight:"lighter",color:"red"}}
/>```
Thanks for helping me, I solved the issue by adding css loader to webpack.config file
Related
I am using react bootstrap Carousel in my react js code. I am successfully able to customize react bootstrap Carousel indicators. By using below code..
div.crausal ol li{
height: 0.3em;
width: 4em;
background-color: #E77728 !important;
}
But I am not able to change the color of active class for indicator. I have tried this
div.crausal ol li.active{
background-color: blue !important;
}
But it does not work.
This is my carousel class.
<Carousel className={css_class.crausal} touch={true} controls={false}>
// Carousel items goes here //
</Carousel>
I want to change the color of active class indicator.
If someone can give better carousel option other than react bootstrap to solve this issue that will also do
I found a kind of fix after researching longer. What you can do is add normal bootstrap file in your project, import it in your component file and now react bootstrap classes are overridden by this normal bootstrap import. After that you can customize the normal bootstrap file downloaded in your project (bootstrap.min.css). But this is just a fix.
What you can do is:
div.carousel-indicators .active{
background-color: #E77728 !important;
}
im trying to disable a shadow in the Drawer from antd components, what im trying to disable is the shadow, i already disable the mask but i cant find way to disable the shadow, here is the shadow
i already tried BoxShadow inside the maskStyle and i cant find any solutions to this probles
You need to add this css to hide drawer box-shadow:
.ant-drawer-right.ant-drawer-open .ant-drawer-content-wrapper {
box-shadow: none
}
.ant-table .ant-table-container::before,
.ant-table .ant-table-container::after {
width: 0px !important;
}
I want to use the primary color from the ant design theme. I believe the less tag is: #primary-color . How do I use this value for a custom div that I want the border color to match? Also this is with an app made by create-react-app.
I want to be able to do something like:
border: '2px solid #fff' // Instead of white, it uses the theme's primary color
In the very top of your .less file import Ant Design styles: #import '~antd/dist/antd.less';
And then you can use any antd color variable:
#import '~antd/dist/antd.less';
.box {
border: 2px solid #primary-color;
}
I am trying to add background-color through styled component.
If add the styles through style={} attribute it is working as expected but If I add the same style in my styled component file it is not working.
//this is working
<MyStyle style={{backgroundColor: '#fff' }}>
//some component here
</MyStyle>
//This is not working.
export const MyStyle = styled.div`
background-color: ‘#fff’;
`;
Can somebody point me here what I am missing here?
The first example is simply using the react style builtin, you don't need styled components to do this.
The code in the second example, you need to remove the quotes around the color, like this:
//This is not working.
export const MyStyle = styled.div`
background-color: #fff;
`;
Styled components takes css syntax, which unlike json syntax, does not have quotes around option names, color names, etc.
You don't have to put single quote around #fff
export const MyStyle = styled.div`
background-color: #fff;
`;
EDITED:
If there are overriding CSS styles that make your div's background not white just yet, and you can't find them, just add !important to this style
export const MyStyle = styled.div`
background-color: #fff !important;
`;
Regarding the issue about finding existing CSS styles that might be overriding your preferred style, take a look at this: https://www.styled-components.com/docs/advanced#existing-css
I am trying to add border-radius: 5px to React-datetime component using className but not working.
E.g:
import ReactDateTime from ‘react-datetime’;
<ReactDateTime className=‘datetime’ />
.datetime{
border-radius: 5px;
}
I know that react-datetime module provides seperate css styles. But my concern is why it is not accepting when I do using className.
Try using inputProps with className as like below. It should work.
<DateTime inputProps={{className:'datetime'}} />
Have you try to add !important like :
.datetime{
border-radius: 5px !important;
}
If it doesn't work it could probably be an override problem.
You will have probably to check here :
https://github.com/YouCanBookMe/react-datetime/blob/master/example/react-datetime.css
If it doesn't work can we see your config for this package ?
We need to have a look on your complete component and css stylesheet