Question

我正在尝试为组件设置style，但是我不知道如何在React中编写正确的语法。我的CSS看起来像这样：

 .cell {
   border: 1px solid rgba(0, 0, 0, 0.05);
 }

这是我的render()方法：

 render() {
   let styles = {
        ...

       //border: 1px solid rgba(0, 0, 0, 0.05),  <---- Not correct
   };
   return (
     <div className="cell" style={styles}></div>
   );
 }

如何将CSS语法转换为React/JS语法？

Answer 1

这是东西：

render() {
   const styles = {
        border: '1px solid rgba(0, 0, 0, 0.05)', 
   };

   return (
     <div style={styles}>Hello</div>
   );
 }

Answer 2

例如：

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;

border: '1px solid rgba(0, 0, 0, 0.05)',

您需要使用'在字符串中声明值来声明CSS属性

Answer 3

由于styles是对象，因此您应该编写border: '1px solid rgba(0, 0, 0, 0.05)'。

Answer 4

为了便于阅读和调试，最好使CSS与组件本身分开。假设您的组件名称为MyComponent.js，与此文件创建目录的级别相同，MyComponent.module.css在文件中放置的样式就像在普通CSS文件中一样：

 .cell {
   border: 1px solid rgba(0, 0, 0, 0.05);
 }

然后将其导入MyComponent.js中：

import styles from ./MyComponent.module.css

然后只需在任何需要使用的地方进行操作即可：

 <div className={styles.cell}></div>

通过这种方式，您的CSS和JS现在可以分开了，您可以像平常一样编写CSS。

Answer 5

通常在camelCase中。示例background-color：“ white”将写为backgroundColor：“ white”

Answer 6

container: {
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            borderColor: '#ccc', borderWidth: 1, 
            width: 150, height: 150, margin: 10,
            borderRadius: 15, backgroundColor: colors.background,
        },

<View style={styles.container}></View>

reactjs-如何设置边框样式？

6 个答案: