ReactJS中简单内联样式未达预期效果，p标签属性为何未应用到内部文本？

嘿，我一眼就看出问题啦！你现在的写法是把HTML的样式属性直接套到React的JSX里，这可不太行～React对于内联样式有自己的规则，所以你的color和text-align属性根本没被识别成样式，自然就只显示纯文本啦。

问题出在哪？ #

在React的JSX中，内联样式不能直接像HTML那样写属性，必须通过style属性传入一个JavaScript对象，而且CSS属性名要改成驼峰命名（因为JS里的对象键不能有连字符，比如text-align得写成textAlign）。

修正后的代码 #

直接改写法就搞定：

import React from 'react';
function App() {
  return ( 
    <p style={{ color: 'red', textAlign: 'center' }}> Inside paragraph tag </p> 
  );
}
export default App;

给你拆解一下改了啥： #

• 用style属性包裹所有样式，里面的双大括号是JSX的语法：外层{}表示要插入JavaScript表达式，内层{}就是我们的样式对象
• 把text-align改成了textAlign，这是React要求的驼峰命名规则，所有带连字符的CSS属性都要这么改（比如background-color→backgroundColor）
• 样式值如果是字符串类型（比如颜色值）要加引号，数值类型的话可以直接写（比如fontSize: 18）

进阶玩法：样式抽成变量 #

如果样式比较多，把它抽成单独的变量会更清晰，维护起来也方便：

import React from 'react';
function App() {
  const paraStyles = {
    color: 'red',
    textAlign: 'center',
    padding: '10px',
    border: '1px solid #ccc'
  };
  return ( 
    <p style={paraStyles}> Inside paragraph tag </p> 
  );
}
export default App;

这样改完之后，你的文字就会变成红色并且居中显示啦～

内容的提问来源于stack exchange，提问作者neel