How to Change the Font Color, Font Size, and Button Color in React

how to change the font color, font size, and button color in React

You write inline style...

<Panel style={{color:'red'}}>

or

<Panel className="sample"> 

in your style.css file just use

.sample {
 your style here....
}

or else

<Panel className={styles.sample}>

then write your style inside

.sample{style here...}

Using a button to change the color of text

All you need to do is change this :

style={[styles.welcome, {color: undefined}]}

To

style={[styles.welcome, {color : this.state.color }]}

---

Please check : WORKING DEMO

how to change the color and font-family in react info banner

import

import { Provider as AlertProvider } from 'react-alert'

then,

childalert.show(<div style={{ 'color': 'blue', 'fontFamily':'arial' }}>
                No changes were done to the ${project.projectName} project
                </div>)

Change font color with TouchableHighlight

Here is a functional way

First, create useState then manipulate it on onPressIn/onPressOut

const TouchableHighlightExample = () => {
  const [BtnColor, setBtnColor] = useState("red");
  return (
    <View>
      <TouchableHighlight onPressIn={()=>setBtnColor("blue")} onPressOut={()=>setBtnColor("red")}>
        <View>
          <Text style={{color: BtnColor}}>Touch Here</Text>
        </View>
      </TouchableHighlight>
    </View>
  );
} 

React JS How to change font color in element other than clicked button onClick?

You messed up some variable names and misunderstood how React works.

First, you can't query and HTML element and execute setState because this is a React function. This function is not accessible from within the HTML document.

Second, your first approach with changing a state variable with the button click and mapping this variable to the color of the list elements is correct, but you mixed up the names:

This is your onChangeMethod:

onChange = () => {
    if (this.state.color == 'blue'){
        this.setState({ color: 'green' });
    }
    else {
        this.setState({ color: 'blue' });
    }
}

Here you are mapping the state variable to the color property:

<li className={(item.name === this.state.name ? 'right' : 'left')}
    style={{ color: this.state.font }}
    key={item.id}
    id={item.id}>
    {item.name}: {item.message}
</li>

You are setting state.color in theonChange function, but you are referencing state.font in you list element, instead change style to the following:

style={{ color: this.state.color }}

React Native change Button Text color

You can use a Button from react-native like this and can also pass the color prop.

Button
  onPress={onPressLearnMore}
  title="Click Me"
  color="#841584"
/>

For complex and custom buttons you can create it by your own styles using Touchables which are given by react-native you don't have to use any third-party libraries for that.

Example:

    <TouchableOpacity style={{ here you can specify custom styles for button container }} onPress={gotoDashboard}>
        <Text style={{here you can specify text styles}}>Button Text Here</Text>
  // You can add there as many components according to your designs.
      </TouchableOpacity>

change button color react native

The react Button component renders the native button on each platform it uses. Because of this, it does not respond to the style prop. It has its own set of props.

The correct way to use it would have been

<Button color="#ff5c5c" title="I'm a button!" />

You can see the documentation at https://facebook.github.io/react-native/docs/button.html

Now, say you do want to make super customizable button, for that you'll have to use views and touchable opacity. Something along the lines of this.

<TouchableOpacity onPress={...}>
  {... button markup}
</TouchableOpacity>

You'll wrap that up in your own button component and use it.

---

Related Topics