We Keep Coding

Styling with dynamically used class names and attributes in JS(React)?

I wonder if there is a feasible way to implement something like that.
Say, I want to specify padding but I don't want to use inline styling and want to use classes instead. But I also don't want to specify all possible values in CSS.
Like I write:
<Container className="p25 m10" />
what can be rendered to the self-generated classes p25 and m10
<div class="p25 m10"/> /* Classes p25 and m10 are self-generated and have padding and margin */
or even
<Container p=25, m=10 />
rendered into the same or at least to
<div style="padding: 25px; margin: 10px"/>

I don't see that there is a way to auto-generate a css class. But,
this your first option, are classes that represent some kind of pure css style, what you can do is create a class like this:
.p25 {
padding: 25px;
}
<Container className="p25"/>
Your second option, are props that inside the functional component, through some logic, you will carry out the implementation, for example:
export default function Container({p, m}) {
return (
<div style={{padding: `${p}px`}, margin: `${m}px`}></div>
)
}

install tailwind and config manual stuff into config file.
module.exports = {
theme: {
extend: {
spacing: {
'25': '25px',
}
}
}
}
then use it this way
<div class="p-[25]">
<!-- ... -->
</div>

conditional className convert to styled component

Im trying to learn and convert my project from css to styled component(https://styled-components.com/), at the moment i have converted all my other components except one component where i am stuck, checked others examples from stackoverflow but it was not same kind.
I have conditional class names
My question is how to convert InfoBox component to use styled component ? do i need to inject the styles through some kind of styled-component wrapper or thats not needed ?
english is not my mother language so could be mistaked
my code:
import React from 'react'
import "./InfoBox.css"
function InfoBox({ isRed, active, activetored, ...props }) {
return (
<div onClick={props.onClick}
className={`infoBox ${active && "infoBox--selected"}
${activetored && "infoBox--selectedtored"}
${isRed && "infoBox--red"} `} >
</div>
)
}
export default InfoBox
<div className="app__stats">
<InfoBox
isRed
active={typeofCase === "cases"}
onClick={(e) => setTypeofCase('cases')}
/>
<InfoBox
isGreen
active={typeofCase === "recovered"}
onClick={(e) => setTypeofCase('recovered')}
/>
<InfoBox
isRed
activetored={typeofCase === "deaths"}
onClick={(e) => setTypeofCase('deaths')}
/>
</div>
css is like this (you can put whatever):
. infoBox--selected {
border-top: 10px solid greenyellow;
}
. infoBox--selectedtored {
border-top: 10px solid red;
}
. infoBox--red {
border-color: darkblue;
}

One of the ideas behind styled-component is to avoid classnames.
Instead of setting the css by class, you have few options. the easiest one will probably be to use your props inside the css code, and change the style by it:
const InfoBox = styeld.div`
border-color: ${props => props.isRed ? 'darkblue' : 'black'};
border-top: ${props => props.active ? '10px solid greenyellow' : 'red'};
...
`;
this way, you don't need classnames (although it can be done with it too, obviously).
Now, instead of the div inside the component, use the InfoBox styled component we just wrote and you good to go.

Specific targeting of CSS classes with Styled Components not being rendered - React

I've been struggling with a styling issue for a while, but the basic issue is that I want to style every instance of <StyledButton> differently after the first. To do this, I'm targeting the wrapping element (attributeset-row className) and the remove-btn className (for <StyledButton>) like so:
const StyledHorizontalAttributesTable = styled(StyledHorizontalAttributes)`
& .attributeset-row:not(:first-child) .remove-btn {
background-color: lightblue;
}
`;
I have discovered the issue is that the CSS styles are not being applied to the components, due to my targeting of classNames - as you can see below I am passing in classNames to the relevant components (and they are showing in the browser), but along with a lot of other what looks to be jargon:
Can anyone explain where I might be going wrong with this in terms of applying specific CSS styles to StyledComponents (usually this type of styling isn't needed) but I need to style all <StyledButton>'s after the first differently.
Here's my code:
const StyledButton = styled(Button)`
margin-top: 14px;
`;
const StyledHorizontalAttributesTable = styled(StyledHorizontalAttributes)`
& .attributeset-row:not(:first-child) .remove-btn {
background-color: lightblue;
}
`;
return (
<div className={className}>
{objects.map((enteredObject, index) => (
<RepeatableAttributeSetContextProvider
form={form}
object={enteredObject}
key={`${enteredObject.key}-${enteredObject.repeatIndex}`}
>
<StyledHorizontalAttributesTable className="attributeset-row">
{enteredObject.attributeCollection.questions
.filter(filterRepeatAttributes)
.map((attribute) => (
<Fragment key={attribute.key}>
{renderAttribute(enteredObject, attribute, formLayout)}
</Fragment>
))}
<StyledButton
className="remove-btn"
type="link"
buttonStyle="LINK"
name="delete"
dataId={`delete-${enteredObject.key}-${index}`}
isOberonIcon
isIconButton
icon="bin"
onClick={() => onRemove(enteredObject)}
>
<Message id="Form.Button.Remove" defaultMessage="Remove" />
</StyledButton>
</StyledHorizontalAttributesTable>
</RepeatableAttributeSetContextProvider>
))}
</div>
);

I would use the adjacent sibling combinator. This will target all .attributeset-rows but the first one.
const StyledHorizontalAttributesTable = styled(StyledHorizontalAttributes)`
& + & {
.remove-btn {
background-color: lightblue;
}
}
`;
Here's a simple version of this example over at CodeSandbox. https://codesandbox.io/s/serene-swanson-frcb4?file=/src/App.js

Filter issue while using Search/Filter logic - React Native

I am struggling with my React Native App!!!!
I have a simple Flatlist.
I have a TextInput that has a filter option.
Click inside the TextInput. A dropdown of filter appears.
Click on that Filter it appears inside the TextInput.
Need some help in styling this!!! It should look somewhat like this. If not to this extent at least a box around it is fine.
I tried it with a Button - React Native elements. It's so so so frustrating. I cannot use any 3rd party libraries (company policy).
TextInput Code:
<Icon type='materialicons' name='search' /> // search icon
<Button icon={<Icon name="check"/>}. //my attempt to create a button around the filter
type='clear' title ={val}
onPress={()=>{this.handleFilterIcon(false); this.setFilt(false)}}/>
<TextInput // Text Input
value={value}
placeholder='Search Here...'
onChangeText={(text)=>{this.handleSearch(text, true);this.renderDropDown(false)}}
onTouchStart={()=>{this.setTempNotifications();this.renderDropDown(true)}}
style={{ height: 40, flex: 1}}
autoCapitalize='none'
selectTextOnFocus={true}
label='input'
/>
<Icon type='materialicons' name='cancel' onPress={()=>{} /> // Clear Icon
<Button title='Cancel'
buttonStyle={{backgroundColor:'#D3D3D3', borderColor: 'grey', borderRadius: 6 , borderWidth: 1, height: 40}}
onPress={()=>{} /> // Cancel button
Anyone please tell me the most efficient way to do this!!!

The only way I'm seeing is, since you don't have to use third party libraries is this:
Create a an empty label next to the input. Wrap these two with a div with position:relative
As soon as input is entered, put the same text in this label. Customise this label with styling: position:absolute;background:grey...
Just to give you some idea, here's an implementation in JQuery. You have to take this forward and ask specific question where you're struggling.
function inputChange(val){
$('label').text(val);
$('input').val("");
}
label{
border:1px solid;
border-radius: 5px;
position: absolute;
background: grey;
left:2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="text" onchange="inputChange(this.value)"/>
<label></label>
</div>
In React the same implementation could look something like this. You can create a file with this implementation, import in your App.js and see. Take this idea fowrward and change the styling and behaviours as per the need.
import React, { Component } from 'react';
class CustomInputTextstyling extends Component {
constructor(props) {
super(props);
this.state ={
inputText: ""
}
}
handleInputChange(e){
this.setState({inputText: e.target.value});
}
render() {
const wrapperDiv = {
position: 'relative'
}
const label = {
border:'1px solid',
borderRadius: '5px',
position: 'absolute',
background: 'grey',
left:'2px'
}
return (
<div style={wrapperDiv}>
<input type = "text" onBlur = {this.handleInputChange.bind(this)}></input>
<label style={label}>{this.state.inputText}</label>
</div>
);
}
}
export default CustomInputTextstyling;

How to display some value with styled-components?

I'm new to styled-components and I'm bit confused.
Can we display something or add functionality to styled-compoentns.
OR styled-components is component that we can apply css only

styled-components is primarily intended to apply css.
So typically you would use wrapper components that provide the content and use the components obtained from styled-components for decoration.
Once in a while, I have found it useful to use the .attrs constructor to pass children when
the content is very specific to the component.
const ResourceMissingError= styled.div.attrs({
children: 'This resource could not be found'
})`color: red`;
render(<ResourceMissingError />);

Can we display something or add functionality to styled-components?
Yes, styled components are usable as any native component would be. So just as HTML's <button> can be used to display something, you can use a styled button to do so. See below.
Similarly, you can add functionality as you would in a native component, by listening to click events, for instance. The demo below "adds" functionality to the ColorfulButton by handling its click event.
See also how the color is passed as a prop to the ColorfulButton via mycolor="green":
const ColorfulButton = styled.button`
display: inline-block;
color: ${props => props.mycolor || "blue"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
display: block;
`;
class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = { text: "Learn JavaScript (click me)", done: true }
}
handleClick = e => {
this.setState({...this.state, done: !this.state.done});
}
render() {
return (
<div>
<ColorfulButton onClick={this.handleClick} mycolor="green">{this.state.text}</ColorfulButton>
<br />
{this.state.done ? 'Yes' : 'No'}
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id="app"></div>

You can make a CSS file and import it in your different components like making class in CSS and use that class in your component as className="". Also, you can refer inline CSS like this way style={{}} make sure the properties name like font-size will be written in fontSize in React inline CSS. Every CSS property that have a dash in the middle of the property name, the dash will be removed and the next letter after dash will be capitalized and also the property value will be in double or single quotation.